当$ .each和array.splice（i）保持在一起时，JQuery处理索引错误中的数组 [英] JQuery handles array out of index errors when $.each and array.splice(i) are kept together

问题描述

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

Recently I was searching in internet for some code which can handle abandoned ajax/xhr calls.

这就是我找到的：

$.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 code works fine, but one line in it confuses me, I doubt that there is some logical error, but somehow works perfect.

以下是令我困惑的部分，

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

通过for循环迭代并获取i'th元素并将其从数组中删除。

Iterating through a for loop and takes i'th element and removes it from array.

现在，当第一个成员被删除时，数组的总长度会减少，元素的索引也会减少。

Now the total length of the array is reduced and the indexes of the elements also reduces, as first member is removed from it.

然后在下一次迭代中，i的值增加，因此获得cought的元素将不同（或不符合预期）。

Then in the next iteration, value of i is increased, so the element which is getting cought will be different (or not as expected).

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

For example consider array = [1,2,3,4,5,6,7,8,9,10];

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

Iteration 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

Iteration 3

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

Itera第4页

Iteration 4

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

迭代5

Iteration 5

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

迭代6

Iteration 6

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

**出现问题。

注意：我的计算机能够理解这些代码并正确执行它，但麻烦在于我的大脑，他还没准备好接受这一部分： - （

Note : My computer is able to understand this code and execute it correctly, but the trouble is with my brain, who is not ready to accept this part :-(

I相信$ .each是能正确完成工作的人，但我仍然无法弄清楚如何。

I believe that the $.each is the one who makes the job correctly, but still I am not able to figure it how.

推荐答案

代码有效，但没有做它应该做的事情。该方法称为 abortAll ， 中止所有XHR，但仅清除一半数组。它应该真正删除它中止的所有项目，而不是它。

The code "works", but is not doing what it is supposed to do. The method is called abortAll, and it does abort all XHRs, but only clears half of the array. It should really remove all items it aborts, which it doesn't.

jQuery 每个将获取一份副本数组和迭代，所以 i 仍然会从0复制到（复制）数组中的最后一个索引，即使元素已从原始数组中删除。

jQuery each will take a copy of the array and iterate that, so i will still go from 0 to the last index in the (copied) array, even though elements are removed from the original array.

但它仍然出错，因为 splice 作用于原始数组，它将元素移动到该数组中的前面索引。但另一方面， i 不断增加，因此两个元素中的一个将在 splice 中存活。

But it still goes wrong, because the splice acts on the original array, which moves elements to preceding indexes in that array. But i, on the other hand, keeps increasing, so one in two elements will survive the splice.

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); 
    });
});

...但实际上，它可以像这样完成：

... but really, it can be done simply like this:

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

这篇关于当$ .each和array.splice（i）保持在一起时，JQuery处理索引错误中的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！