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

Question

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

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

我目前遇到的问题是当 for 循环运行s 它一个接一个地打开所有 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（您也可以创建一个单独的函数来 return 所需的函数，并避免使用错误的变量创建闭包）：

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

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

How to make sure XMLHttpRequest finishes inside for loop?

javascript

facebook-graph-api

facebook-opengraph