javascript - 当 $.each 和 array.splice(i) 放在一起时，JQuery 处理数组超出索引错误

Question

最近我在互联网上搜索一些可以处理废弃的ajax/xhr调用的代码。

And this is what I found :

$.xhrPool = [];

$.ajaxSetup({
    beforeSend: function (jqXHR) {
        $.xhrPool.push(jqXHR);
    },
    complete: function (jqXHR) {
        var i = $.xhrPool.indexOf(jqXHR);
        if (i > -1)
            $.xhrPool.splice(i, 1);
    }
});

$.xhrPool.abortAll = function () {
    $(this).each(function (i, jqXHR) {
        jqXHR.abort();
        $.xhrPool.splice(i, 1);// This is the line which makes me confused.
    });
};

这段代码工作正常，但其中的一行让我感到困惑，我怀疑存在一些逻辑错误，但不知何故工作完美。

下面是让我困惑的部分，

$(this).each(function (i, jqXHR) {
        $.xhrPool.splice(i, 1);
});

迭代 for 循环并获取第 i 个元素并将其从数组中删除。

现在，数组的总长度减少了，元素的索引也减少了，因为第一个成员已从中删除。

然后在下一次迭代中，i 的值增加，因此出现咳嗽的元素将有所不同(或不符合预期)。

例如，考虑 array = [1,2,3,4,5,6,7,8,9,10];

迭代 1

array = [1,2,3,4,5,6,7,8,9,10]
i=0
removes 1
new array is [2,3,4,5,6,7,8,9,10]

迭代 2

array = [2,3,4,5,6,7,8,9,10]
i=1
removes 3
new array is [2,4,5,6,7,8,9,10]

迭代 3

array = [2,4,5,6,7,8,9,10]
i=2
removes 5
new array is [2,4,6,7,8,9,10]

迭代 4

array = [2,4,6,7,8,9,10]
i=3
removes 7
new array is [2,4,6,8,9,10]

迭代 5

array = [2,4,6,8,9,10]
i=4
removes 9
new array is [2,4,6,8,10]

迭代 6

array = [2,4,6,8,10]
i=5

** 麻烦来了。

注意:我的计算机能够理解这段代码并正确执行它，但问题出在我的大脑上，我还没有准备好接受这部分:-(

我相信 $.each 是正确完成这项工作的人，但我仍然无法弄清楚它是如何实现的。

Answer 1

代码“有效”，但没有做它应该做的事情。该方法称为 abortAll，它确实中止所有 XHR，但只清除数组的一半。它确实应该删除它中止的所有项目，但事实并非如此。

jQuery each 将获取数组的副本并对其进行迭代，因此 i 仍将从 0 到(复制的)数组中的最后一个索引，即使元素从原始数组中删除。

但它仍然会出错，因为splice作用于原始数组，它将元素移动到该数组中的前面的索引。但另一方面，i 不断增加，因此二分之一的元素将在拼接中幸存下来。

abortAll可以更正为:

$.xhrPool.abortAll = function () {
    $(this).each(function (i, jqXHR) {
        jqXHR.abort();
        // the element to be deleted will always be at index 0 in the original array:
        $.xhrPool.splice(0, 1); 
    });
});

...但实际上，可以像这样简单地完成:

$.xhrPool.abortAll = function () {
    $(this).each(function (i, jqXHR) {
        jqXHR.abort();
    });
    $.xhrPool.length = 0;
});