我得到了一个带有项目列表的模式。
单击商品 div 会将商品添加到列表中,同时还会更新购物车总价。
单击所选商品将从列表中删除该商品,同时还会更新购物车总价。
当缓慢点击时,它效果很好,但是当我像疯子一样点击时(在短时间内添加/删除许多项目),我会得到奇怪的结果,例如:所选值不会返回到 0 或某些值尽管没有实际选择项目,但项目仍在“itemsInBuyCart”数组中。
app.addItemToBuyCart = function(item, price, div) {
if (app.addClicking) return;
app.addClicking = 1;
if (app.itemsInBuyCart.indexOf(item.toString()) == -1) {
app.itemsInBuyCart.push(item.toString());
div.children().addClass("selected");
app.buySelectedValue += price;
} else {
app.itemsInBuyCart.splice(app.itemsInBuyCart.indexOf(item));
div.children().removeClass("selected");
app.buySelectedValue -= price;
}
$('#buySelectedValue').text(app.buySelectedValue);
app.addClicking = 0;
}
每个项目的可点击 div 的生成方式如下:
$("#buyCartModal").append('<div style="cursor:pointer" onClick="app.addItemToBuyCart(' + item.id + ', '+item.price+', $(this));"
最佳答案
这里有很多 DOM 操作的逻辑。这可能会对性能造成足够的负担,这意味着并不总是会注册快速点击,因为之前的功能仍在运行(或者出现了您所描述的奇怪行为)。
那么你能做些什么呢?
如果没有看到您的完整代码,我无法提出非常有用的优化建议,但作为一般建议,设置一个必须为 true 的 bool 变量,以便通过 onClick
调用该函数。在 addItemToBuyCart()
的最后将 bool 变量设置为 true,在最开始将 bool 变量设置为 false。这有点模糊,但我认为您明白了,这确保了您仅在浏览器准备好处理请求时调用您的函数。
关于javascript - 单击向数组添加/删除项目时出现奇怪的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44934770/