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的布尔变量，以便通过var access_token = GetAuth2Token(vm.scannedDevices[i]);调用该函数。在onClick的最后设置布尔变量为true，在开头设置为false。这有点模糊，但我认为你明白了，这确保你只是在浏览器准备好处理请求时调用你的函数。

在点击时向数组添加/删除项目时出现奇怪问题

1 个答案: