javascript - jQuery 仅适用于浏览器首次启动

Question

我正在完成免费代码训练营的一项练习，该练习要求我与 TwitchTV API 进行交互。

我正在使用一个 jQuery 文件，我将其包含在 HTML 文件中结束正文标记之前 - 请参阅下面的代码。

我正在使用代码的最后一行来检查我是否正在获取数据。

当我第一次启动浏览器时，代码工作正常。但是，如果我刷新(在更改后检查我的工作)，控制台的输出将是一个空数组，这不是我所期望的。

有人可以帮我弄清楚为什么会出现这种行为吗？另外，我该如何解决它？

$(document).ready(function() {
  // on document ready
  var baseEndpoint = "https://api.twitch.tv/kraken/streams/"
  var users = ["medrybw", "freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","comster404","brunofin","thomasballinger","noobs2ninjas","beohoff"]
  var JSONP = "?callback=?"

  // all users
  var allUsers = [];

  // for each user
  users.forEach(function(currUser) {
    // make a request to the API
    $.getJSON(baseEndpoint + currUser + JSONP, function(data) {
      // gather and format information for user
      var user = {};

      // userName
      user["userName"] = currUser;

      // streamStatus
      if (data["stream"] === null) {
        user["streamStatus"] = "user-off";
      }
      else {
        user["streamStatus"] = "user-on";
      }

      // img
      if (user["streamStatus"] === "user-on") {
        user["img"] = data["stream"]["channel"]["logo"];
      }
      else {
        user["img"] = "http://static-cdn.jtvnw.net/jtv-static/404_preview-300x300.png";
      }

      allUsers.push(user);
    });
  });

  $(document).ajaxComplete(function() {
    console.log(allUsers);
  });
});

Answer 1

AJAX 的特点是异步部分。看看这个答案 What does Asynchronous means in Ajax? .

在您的代码示例中，您要求 JS 在 api 调用完成之前显示 users 数组的值，因此它是空的。

在这个笨蛋中http://plnkr.co/edit/dKfuP9XDhidWMskmiop3?p=preview您可以看到，每次 AJAX 调用完成时，我都使用事件绑定(bind)器来输出用户数组。

$( document ).ajaxComplete(function() {
 console.log(allUsers);
}); 

通过这种方式输出，您可以在返回每次对 api 的调用时看到数组构建。

祝你好运!