javascript - 通过单击复选框进行 Ajax 调用 - 执行错误
问题描述
我有一个包含很多复选框的页面,例如:
<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 以正确的顺序发送调用。现在,我只是将“异步”选项设置为“假”,但点击输入后会延迟
我的想法是计算所有请求,将它们保存到全局数组并检查此响应是否按顺序排列。
解决方案
您可以实现一个队列,以便一次实现 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();
}
});
}
};
推荐阅读
- c++ - 如何快速检查瓷砖网格中的元素是否在我的视口中?
- bash - 在后台运行时杀死进程的bash脚本
- python - 如何使此命令显示机器人正在服务的用户数量?
- python - 使用 python (pandas?) 对新数据进行重复排序
- php - 喜欢和不喜欢系统数据库和查询问题?
- javascript - 在我的网页上在小屏幕上运行另一个 .html 页面
- python - 更改 Pandas 中列的值
- php - Imagemagick 从 6.9 升级到 7 后反转颜色
- hive - 如何向这个 hive 命令添加一个表?
- module - 有没有办法获取包含在 fortran .mod 文件中的符号?