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();
}
});
}
};