通过单击复选框进行 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();
        }
      });
    }
  };