单击复选框调用Ajax -执行错误
单击复选框调用Ajax -执行错误
提问于 2021-10-08 11:30:43
我有一个带有许多复选框的页面，类似于：
<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"，但它在单击输入后会产生延迟
我的想法是对所有请求进行计数，将它们保存到全局数组中，并检查此响应是否为下一个响应。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-08 12:14:46
您可以实现一个队列，这样一次只能实现一个请求。
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();
}
});
}
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69495145
复制相关文章
相似问题
腾讯云开发者
