如何取消for循环中发起的所有AJAX请求

你碰到的这个问题其实很常见——在你的代码里，每次循环都用同一个XHR变量去存储新的AJAX请求实例，循环结束后这个变量只会保留最后一次请求的引用，之前的请求实例都被覆盖掉了，所以调用XHR.abort()自然只能取消最后那一个请求。

要解决这个问题，我们只需要把每一个AJAX请求的实例都存到一个数组里，这样就能追踪到所有发起的请求，之后要取消时遍历数组对每个实例调用abort()就行。

完整实现代码 #

首先，我们先定义一个数组来保存所有请求实例：

// 创建数组存储所有AJAX请求实例
const xhrRequests = [];
const urls = ["www.example.com","www.example2.com",....];

for (let i = 0; i < urls.length; i++) {
  // 每次循环创建独立的请求实例
  const xhr = $.get(urls[i], function(data) {
    // 这里写你的处理逻辑
    
    // 可选优化：请求成功完成后，从数组中移除该实例
    const requestIndex = xhrRequests.indexOf(xhr);
    if (requestIndex !== -1) {
      xhrRequests.splice(requestIndex, 1);
    }
  });
  // 将当前请求实例加入数组
  xhrRequests.push(xhr);
}

然后写一个用来取消所有请求的函数：

// 取消所有未完成的AJAX请求
function cancelAllPendingRequests() {
  xhrRequests.forEach(request => {
    // 检查请求是否还未完成（避免对已完成的请求重复调用abort）
    if (request.readyState !== 4) {
      request.abort();
    }
  });
  // 清空数组，方便后续重新发起请求
  xhrRequests.length = 0;
}

一些细节说明 #

• 我把循环里的var改成了let，这样能确保每次循环的xhr变量都是独立的，不会出现变量提升导致的引用混乱问题。
• 加入了请求完成后从数组移除实例的逻辑，这样后续调用取消函数时，只会处理那些还在pending状态的请求，更高效。
• 调用abort()前检查readyState是个好习惯，虽然已完成的请求调用abort()不会报错，但这样做更严谨。

内容的提问来源于stack exchange，提问作者bassem