Question

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

我为每个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/

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));

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

1 个答案: