javascript - jQuery 中止 ajax 调用无法正常工作
问题描述
如果单击按钮,我将尝试中止所有未决的 ajax 调用。我有以下 javascript 代码。
var MyApp = function() {
this.xhrPool = [];
}
MyApp.constructor = MyApp;
MyApp.prototype.fetchDataFromApi = function() {
var rows = $("tr.data-row");
var _obj = this;
rows.each(function(index, rowData){
$.ajax({
type: "GET",
url: "http://wwww.example.com/somepage/",
dataType: "json",
beforeSend: function(jqXHR){
_obj.xhrPool.push(jqXHR);
},
success: function(response){
//do something here on successful call
},
complete: function(jqXHR){
var i = _obj.xhrPool.indexOf(jqXHR);
if(i > -1) _obj.xhrPool.splice(i,1);
},
error: function(request, status, error){
//do something else here on ajax error
}
});
});
}
MyApp.prototype.AbortAllAjaxCall = function(){
if(this.xhrPool.length > 0){
var xhrPoolLength = this.xhrPool.length;
for(x in this.xhrPool){
this.xhrPool[x].abort();
this.xhrPool.splice(x,1);
console.warn("Aborted "+x+" ajax calls");
}
alert(this.xhrPool.length+ " of "+xhrPoolLength+" calls aborted");
}
}
var app = new MyApp();
一次总是有40个电话。我已经限制了 ajax 调用,以便在几分钟内没有任何调用响应任何内容。即所有 40 个呼叫的状态保持等待几分钟。
单击呼叫后,我有一个按钮app.AbortAllAjaxCall()
。
app.AbortAllAjaxCall()
方法在循环中中止 ajax 调用,最后警告中止调用的长度和总 ajax 调用的长度。
问题
但是,问题在于,通过单击按钮,所有 ajax 调用都应该被中止,但事实并非如此。我必须单击按钮 3-4 次才能中止所有 ajax 调用。
任何人都可以阐明我在这里做错了什么吗?
谢谢
解决方案
这是因为您使用了拼接,所以索引在循环时发生了变化。例如:当x
为 0 时,中止第一个 ajax 并将其从数组中删除,因此索引为 1 的元素将成为第一个,并且在变为 1 时不会中止x
。要解决此问题,您可以从数组末尾循环:
for (let x = this.xhrPool.length - 1; x >= 0; x--){
this.xhrPool[x].abort();
this.xhrPool.splice(x,1);
console.warn("Aborted "+x+" ajax calls");
}
或者xhrPool
在不使用拼接的情况下中止所有 ajax 后设置为空数组:
for(x in this.xhrPool){
this.xhrPool[x].abort();
console.warn("Aborted "+x+" ajax calls");
}
this.xhrPool = [];
推荐阅读
- android - 检查 SD 卡是否可用
- python - 代码给出了正确的结果(显然),但也给出了 SettingWithCopyWarning: A value is trying to be set on a copy of a slice from DataFrame
- c - C语言中的简单字数
- qt - QLocalSocket:套接字访问错误(错误3)
- knex.js - knex 查询中缺少表名
- postgresql - 无法远程连接到 Postgres Docker 容器
- mysql - 插入不存在的行并使用先前的值
- python - 如何合并两个查询集 django
- c - 在 C 中: void* 是一种类型吗?
- javascript - CSS 在动态路由上不能与 vue js 一起使用