为什么XMLHttpRequest.abort阻止除循环内第一个内容以外的所有Ajax调用

Question

我正在修改通过发送虚假Ajax请求来实现Javascript中的线程。不过，我对下面的代码的行为感到惊讶。

随着xhr.abort（）注释掉，“季度”和“半”都会像我期望的那样穿插到控制台。但是如果调用xhr.abort（），则只有“季度”被发送到控制台，而不是“一半”。

任何人都可以深入了解XMLHttpRequest的中止方法是如何工作的，或者可以理解的情况。我查看了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)} 
]); 

Answer 1

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