jQuery仅适用于浏览器's的第一次启动

jQuery works only with browser's first boot

本文关键字：第一次 启动 适用于 浏览器 jQuery      更新时间：2023-09-26

我正在完成自由代码营的一项练习，该练习要求我与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);
  });
});

AJAX的特点是异步部分。看看这个关于异步在Ajax中意味着什么的答案？。

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

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

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

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

祝你好运！

相关文章：