Question

我正在完成Free Code Camp的练习，要求我与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数组的值，因此它为空。

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

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

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

祝你好运！

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

1 个答案: