javascript - 单击向数组添加/删除项目时出现奇怪的问题

Question

我得到了一个带有项目列表的模式。

单击商品 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));"

Answer 1

这里有很多 DOM 操作的逻辑。这可能会对性能造成足够的负担，这意味着并不总是会注册快速点击，因为之前的功能仍在运行(或者出现了您所描述的奇怪行为)。

那么你能做些什么呢？

如果没有看到您的完整代码，我无法提出非常有用的优化建议，但作为一般建议，设置一个必须为 true 的 bool 变量，以便通过 onClick 调用该函数。在 addItemToBuyCart() 的最后将 bool 变量设置为 true，在最开始将 bool 变量设置为 false。这有点模糊，但我认为您明白了，这确保了您仅在浏览器准备好处理请求时调用您的函数。