javascript-为什么XMLHttpRequest.abort阻止除循环的第一个内部之外的所有Ajax调用

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

注释掉xhr.abort()之后,“四分之一”和“半分”都散布在控制台上,正如我所期望的那样.但是,如果调用xhr.abort(),则仅将“ quarter”发送到控制台,而不发送“ half”.

任何了解XMLHttpRequest的abort方法如何工作或会受到赞赏的人.我看了https://developer.mozilla.org/en/DOM/XMLHttpRequest的文档,上面写着“ abort()….如果请求已经发送,则中止请求.”关键是*单个*请求,而不是其他所有请求,就好像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)}
]);

解决方法:

块不会在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] );