爲什麼我的for循環不能用於索引我的JSON URL？

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

因爲$.getJSON(url, function(data) { ...是異步調用，並及時解決您的循環已經結束。

Answer 2

for -loop在即使執行第一個回調之前也會運行完成。這意味着第一次調用內部函數時，變量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循環已經結束，全球varialbe url您declear使用var的價值urlPrefix + arr[the last index]，所以在回調請求相同的URL所有的Ajax。

您可以閱讀這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); 
        } 
       }); 
      } 
     });