Ajax 通过点击复选框调用 - 执行错误

Question

我有一个包含很多复选框的页面，例如：

<input type="checkbox" value="1">
<input type="checkbox" value="2">
<input type="checkbox" value="3">
<input type="checkbox" value="4">
<input type="checkbox" value="5">
<input type="checkbox" value="6">
<input type="checkbox" value="7">

另外，还有两个重要的数字：

<h2 id="total-1">100</h2>
<h2 id="total-2">200</h2>

用户点击复选框后 - 我必须向服务器发送 ajax 带有复选框值的请求。服务器执行一些逻辑并使用新的“total-1”、“total-2”数字发送响应。我必须根据这个数字更改复选框背景颜色并更改数字。

问题来了：每页大约有 20 个复选框，如果用户点击速度太快，由于异步 ajax 调用，我会遇到正确值的问题。

例如，如果用户取消选中所有复选框，则数字应为“0”。我快速点击并收到此行为：

Total-1     Total-2
100         100      -> If all checkboxes are checked - numbers are same
72          30       -> Some logic, not matter what exactly
50          0        -> all checkboxes unchecked, but number is wrong.

如果我重新加载页面，我可以看到其中一个复选框仍处于选中状态... 正如所见，异步调用的问题。我需要帮助来了解如何确保 ajax 以正确的顺序发送呼叫。现在，我只是将“async”选项设置为“false”，但是在点击输入后它会延迟

我的想法是计算所有请求，将它们保存到全局数组并检查此响应是否按顺序排列。

Answer 1

您可以实现一个队列，以便一次实现 1 个请求，

myQueue.pushRequest(function() {
  return $.ajax({
    ...
  })
});

$(function () {
  var myQueue = {
    queueReq: [],
    pushRequest: function (request) {
      this.queueReq.push(request);
      if (this.queueReq.length === 1) {
        this.executeIncrement();
      }
    },
    clearQueue: function () {
      this.queueReq = [];
    },
    executeIncrement: function () {
      var queueReq = this.queueReq;
      queueReq[0]().then(function (data) {
        queueReq.shift();
        if (queueReq.length) {
            myQueue.executeIncrement();
        }
      });
    }
  };

Ajax 通过点击复选框调用 - 执行错误

Ajax calls by clicking on checkbox - wrong executing

javascript

jquery

ajax

asynchronous

async.js