Question

$(document).ready(function() {
  var streamers = ["freecodecamp", "OgamingSC2", "cretetion", "ESL_SC2", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  var status;
  for (var i = 0; i < streamers.length; i++) {
    var url = "https://wind-bow.glitch.me/twitch-api/streams/" + streamers[i];
    $.getJSON(url, function(data) {
      if (data.stream === null) {
        status = "Offline";
        var url2 = "https://wind-bow.glitch.me/twitch-api/channels/" + streamers[i] + "";
        $.getJSON(url2, function(data2) {
          $("#container").append('<div class="row"><div class="col-sm-4"><img class="img-circle img-responsive" src="' + data2.logo + '"></div><div class="col-sm-4"><h2>' + data2.name + '</h2><p></div><div class="col-sm-4"><h2>' + status + '</h2></div></div><hr>');
        });
      } else {
        console.log(data);
      }
    });
  }
});

for循环不能用于索引我的JSON URL。这样做是否有效，而不是使用两个getJSON请求？

Answer 1

因为$("#holder > div:nth-child(2)").after("<div>add div</div>");是异步调用并且及时解析循环已经结束。

Answer 2

即使第一个回调被执行，for - 循环也会运行完成。这意味着第一次调用内部函数时，变量i等于streamers.length。

解决方案是在新变量中制作i的本地副本，并在回调中使用这些副本。使用let可确保每个变量都是一个单独的副本，而不是重用的变量。

$(document).ready(function() {
    var streamers = ["freecodecamp", "OgamingSC2", "cretetion", "ESL_SC2", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
    var status;
    for(var i = 0; i < streamers.length; i++)
    {
        let j = i; // create local copy to store value of i.
        var url = "https://wind-bow.glitch.me/twitch-api/streams/" + streamers[j];
        $.getJSON(url, function(data) {
            if(data.stream ===  null) {
                status = "Offline";
                var url2 = "https://wind-bow.glitch.me/twitch-api/channels/" + streamers[j] + "";
                $.getJSON(url2, function(data2) {
                    $("#container").append('<div class="row"><div class="col-sm-4"><img class="img-circle img-responsive" src="' + data2.logo + '"></div><div class="col-sm-4"><h2>' + data2.name + '</h2><p></div><div class="col-sm-4"><h2>' + status + '</h2></div></div><hr>');
                });
            }
            else
            {
                console.log(data);
            }
        });
    }   
});

Answer 3

当第6行的ajax请求回调执行时，for循环结束，使用url解析的全局变量var的值为urlPrefix + arr[the last index]，因此所有ajax在回调请求中使用相同的URL。

您可以阅读此doc about closure以了解代码以这种方式运行的原因。

Answer 4

重新排列您的代码以使用then而不是成功回拨并尝试：

        $(document).ready(function () {
            var streamers = ["freecodecamp", "OgamingSC2", "cretetion", "ESL_SC2", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
            var status;
            for (var i = 0; i < streamers.length; i++) {
                var url = "https://wind-bow.glitch.me/twitch-api/streams/" + streamers[i];

                $.getJSON(url).then(function (data) {
                    if (data.stream === null) {
                        status = "Offline";
                        var url2 = "https://wind-bow.glitch.me/twitch-api/channels/" + streamers[i] + "";
                        $.getJSON(url2).then(function (data2) {
                            $("#container").append('<div class="row"><div class="col-sm-4"><img class="img-circle img-responsive" src="' + data2.logo + '"></div><div class="col-sm-4"><h2>' + data2.name + '</h2><p></div><div class="col-sm-4"><h2>' + status + '</h2></div></div><hr>');
                        });
                    } else {
                        console.log(data);
                    }
                });
            }
        });

为什么我的for循环不能用于索引我的JSON URL？

4 个答案: