javascript - 如何确保 XMLHttpRequest 在 for 循环内完成？

Question

我有这段代码可以获取页面上不同文章的共享计数。

我为每个 URL 打开一个 XHR 并获取它的图形结果，将响应解析为 JSON 并获取份额。然后，我通过缩写算法运行共享编号以获得更友好的编号。

我目前遇到的问题是，当 for 循环运行时，它会一个接一个地打开所有 XHR，然后只继续处理最后一个。不知何故，其他 XHR 正在被抛弃。

我如何确保获得所有请求的结果？

var counters = document.getElementsByClassName('box-counter');
for (var i = 0, n = counters.length; i < n; i++) {
  var element = counters[i],
    XHR = new XMLHttpRequest();
  element.innerHTML = 'unknown';
  XHR.onreadystatechange = function() {
    if (XHR.readyState == 4 && XHR.status == 200) {
      element.innerHTML = friendlyExpress(
        JSON.parse(XHR.responseText).shares
      );
    }
  }
  XHR.open(
    'GET',
    'http://graph.facebook.com/' + counters[i].parentNode.attributes['data-url'].value,
    /*async*/
    true);
  XHR.send();
}

function friendlyExpress(x, legend, power) {
  legend = 'okmgpt';
  power |= 1024;

  var powerLimit = legend.length - 1,
    powerIndex = 0;

  while (x > (power - 1) && powerIndex < powerLimit) {
    x /= power;
    powerIndex++;
  }
  return Math.round(x) + legend[powerIndex];
}

<div>
  <section data-url="http://highline.huffingtonpost.com/articles/en/amaris-tyynismaa-runner/">
    <h3> Some Article </h3>
    <div class="box-counter"></div>
  </section>
  <section data-url="http://www.greenvilleonline.com/story/news/local/2015/05/07/stephen-colbert-funding-grant-requests-south-carolina-public-school-teachers-donorschoose-crowdfunding-site/70938100/?from=global&sessionKey=&autologin=">
    <h3> Some Article 2</h3>
    <div class="box-counter"></div>
  </section>
  <section data-url="http://www.nytimes.com/2015/05/08/us/politics/iran-bill-republicans.html">
    <h3> Some Article 3</h3>
    <div class="box-counter"></div>
  </section>
</div>

http://jsfiddle.net/ea7qgzv8/

Answer 1

问题是您的onreadystatechange 处理程序是一个引用XHR 和element 当前值的闭包。由于这些在每次循环迭代时都会发生变化，因此每个处理程序在执行时都会引用 XHR 和 element 的最新值。由于循环可能在第一个请求完成之前退出，因此所有处理程序都引用最后分配的值。要解决此问题，您需要在声明处理程序时捕获 XHR 和 element 的当前值。最简单的是使用 IIFE (您还可以创建一个单独的函数来返回所需的函数并避免使用错误的变量创建闭包):

XHR.onreadystatechange = (function(elt, req) {
    return function() {
        if (req.readyState == 4 && req.status == 200) {
            elt.innerHTML = friendlyExpress(JSON.parse(req.responseText).shares);
        }
    };
}(element, XHR));