如何确保 XMLHttpRequest 在 for 循环内完成？答案

【问题标题】：How to make sure XMLHttpRequest finishes inside for loop?如何确保 XMLHttpRequest 在 for 循环内完成？
【发布时间】：2015-05-13 18:33:23
【问题描述】：

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

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

我目前遇到的问题是，当 for 循环运行时，它会一个接一个地打开所有 XHR，然后只继续处理最后一个创建的 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/

【问题讨论】：

标签： javascript facebook-graph-api facebook-opengraph

【解决方案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));

【讨论】：