Question

我已经实现了通常的AJAX池，但是当我中止所有请求时，它会以2个请求的增量中止它们，即。第一，第三，第五...... 这基本上就是我所做的：

$.ajaxSetup({
  beforeSend: function(jqXHR, settings) {
    $.xhrPool.push(jqXHR);
  },
  complete: function(jqXHR, text) {
    // Remove a completed request from the array
    var index = $.xhrPool.indexOf(jqXHR);
    if (index > -1) {
      $.xhrPool.splice(index, 1);
    }
  },
  error: function(jqXHR, textStatus, errorThrown) {
    // Remove a error request from the array
    var index = $.xhrPool.indexOf(jqXHR);
    if (index > -1) {
      $.xhrPool.splice(index, 1);
    }
  }
});

function abortAll() {
  $.each($.xhrPool, function(key, value) {
    value.abort();
  });
}

如果我在console.log(value)内执行了$.each，其中一些是未定义的。如果我在console.log($.xhrPool)之前做$.each，那么它们看起来都很好。

我错过了什么？

Answer 1

首先，即使在complete之后调用error，所以如果你做同样的事情你也不需要处理它们。

其次，当您中止调用error和complete时，初始数组会在您迭代它时被更改（<{>>在$.each 中）一般来说这是一种糟糕的模式。

所以在each中你处于第一个元素，你中止它（并改变数组以删除元素），然后你转到索引2的元素，这是自从第一次被移除以来第3次但现在是第2次。

Array                      each index                target
[xhr1, xhr2, xhr3, xhr4]       0                      xhr1
[xhr2, xhr3, xhr4]             1                      xhr3
[xhr3, xhr4]                   2                      undefined

Answer 2

基于Gaby aka G. Petrioli answer，实际解决此问题的最佳方法是创建一个新的数组来循环：

function abortAll() {
  // copying-an-array-of-objects-into-another-array-in-javascript
  // https://stackoverflow.com/questions/16232915
  var calls = Array.from($.xhrPool);

  $.each(calls, function(key, value) {
    value.abort();
  });
}

中止所有ajax请求

2 个答案: