javascript - 为什么 XMLHttpRequest.abort 会阻止循环中第一个以外的所有 Ajax 调用

Question

我正在尝试通过发送伪造的 Ajax 请求在 Javascript 中实现线程。但是，我对下面代码的行为感到惊讶。

注释掉 xhr.abort() 后，“quarter”和“half”都会像我预期的那样散布到控制台。但是如果调用 xhr.abort()，只有“quarter”被发送到控制台，而不是“half”。

任何深入了解 XMLHttpRequest 的中止方法的工作原理或情况的人都将不胜感激。我查看了 https://developer.mozilla.org/en/DOM/XMLHttpRequest 上的文档它说“中止()....中止请求，如果它已经被发送。”关键是 *单一* 请求，而不是所有其他请求，就好像 XMLHttpRequest 是一个单例一样。

function parallelize(bogusUrl, parallelFns) {
    for (var i=0, n=parallelFns.length; i<n; i++) {
        var fn = parallelFns[i]
            ,xhr;

        try {xhr = new XMLHttpRequest()}
        catch (e) {xhr = new ActiveXObject('Microsoft.XMLHTTP')}

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 1) {
                fn();
                //xhr.abort();
            }
        };

        xhr.open('GET', bogusUrl);
        xhr.send(null);
    }
}

parallelize('bogusUrl', [
    function(){setInterval(function(){console.log('quarter')}, 250)},
    function(){setInterval(function(){console.log('half')}, 500)}
]);

Answer 1

block 不会在 JavaScript 中创建作用域；只有功能可以。因此，循环的每次迭代都共享相同的“xhr”变量，并且它的值在每次迭代时都会被覆盖。

要解决这个问题，您可以创建一个单独的函数来执行 xhr 工作:

function doXHR(fn) {
    var xhr = null;

    try {xhr = new XMLHttpRequest()}
    catch (e) {xhr = new ActiveXObject('Microsoft.XMLHTTP')}

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 1) {
            fn();
            //xhr.abort();
        }
    };

    xhr.open('GET', bogusUrl);
    xhr.send(null);
}

然后你的循环看起来像这样:

for (var i=0, n=parallelFns.length; i<n; i++)
    doXHR( parallelFns[i] );