$ .getJSON函数内无法访问全局数组

Question

我正在为Twitch TV做一个“查看器”，它显示电视频道是在线，离线还是不存在。 我正在使用Twitch TV的API。 我已经将频道名称保存在数组中，但是当我尝试将数组项追加到HTML元素时，它显示为“未定义”。 该数组是一个全局变量。

我的代码在这个小提琴中 。

HTML：

<div class="container-fluid">

<div class="row row-centered">

<div class="col-md-4"></div>  
<!-- This is a div containing divs for each channel --> 
<div class="col-md-4 col-centered" id="displayHere">


</div>
<!-- The container div end here -->
<div class="col-md-4"></div>  

</div>  

</div>

我的Javascript：

$(document).ready(function(){
streamsArr=  ["ESl_SC2","OgamingSC2","cretetion","freecodecamp","storbeck","habathcx","RobotCaleb","noobs2ninjas","brunofin","comster404"];

 for(var count=0;count<streamsArr.length;count++){
 $.getJSON("https://api.twitch.tv/kraken/streams/"+streamsArr[count]+"?callback=?",function(data){

  if(JSON.stringify(data.stream)=="null")
   {
       $("#displayHere").append("<div style=\"padding:1%;\"><span style=\"font-size:1.3em;\"> "+streamsArr[count]+"</span><span style=\"color:red;\">OFFLINE</span></div>");//shows 'undefined'
    }
  else if(data.hasOwnProperty("error"))
    {
      $("#displayHere").append("<div style=\"padding:1%;\"><span style=\"font-size:1.3em;\"> "+streamsArr[count]+"</span><span style=\"color:red;\">UNAVAILABLE</span></div>");//shows 'undefined'
    }
  else{
  $("#displayHere").append("<div style=\"padding:1%;\"><span style=\"font-size:1.3em;\"> "+JSON.stringify(data.stream.channel.display_name)+"</span>"+JSON.stringify(data.stream.game)+"</div>");
  }
}); 
 } 
});

有人可以告诉我问题出在哪里吗？ 谢谢。

Answer 1

由于JavaScript具有函数作用域，因此已为变量count创建了一个闭包，这就是为什么count变量的值始终为10的原因。在ES6中，可以在for循环中使用let而不是var ，因此count可以在块范围内进行。

Answer 2

$.getJSON方法是异步的，因此For循环可能会在当前请求返回结果之前完成。 因此变量count值变为10。

这是一个有效的小提琴https://jsfiddle.net/bkw5dLac/1/

 $(document).ready(function(){ streamsArr= ["ESl_SC2","OgamingSC2","cretetion","freecodecamp","storbeck","habathcx","RobotCaleb","noobs2ninjas","brunofin","comster404"]; for(var count=0;count<streamsArr.length;count++){ getJSON(streamsArr[count]); } }); function getJSON(arr){ $.getJSON("https://api.twitch.tv/kraken/streams/"+arr+"?callback=?",function(data){ if(JSON.stringify(data.stream)=="null") { $("#displayHere").append("<div style=\\"padding:1%;\\"><span style=\\"font-size:1.3em;\\"> "+arr+"</span><span style=\\"color:red;\\">OFFLINE</span></div>");//shows 'undefined' } else if(data.hasOwnProperty("error")) { $("#displayHere").append("<div style=\\"padding:1%;\\"><span style=\\"font-size:1.3em;\\"> "+arr+"</span><span style=\\"color:red;\\">UNAVAILABLE</span></div>");//shows 'undefined' } else{ $("#displayHere").append("<div style=\\"padding:1%;\\"><span style=\\"font-size:1.3em;\\"> "+JSON.stringify(data.stream.channel.display_name)+"</span>"+JSON.stringify(data.stream.game)+"</div>"); } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container-fluid"> <div class="row row-centered"> <div class="col-md-4"></div> <!-- This is a div containing divs for each channel --> <div class="col-md-4 col-centered" id="displayHere"> </div> <!-- The container div end here --> <div class="col-md-4"></div> </div> </div> 

为什么OP的代码无法按预期工作

1）变量count是$.getJSON 匿名回调函数的全局变量

2）$ .getJSON是异步的。 因此，匿名回调函数仅在成功获取请求之后才被触发。

3）执行匿名回调时，将在for循环中修改count值。 在许多情况下，它变为10。因为for循环在触发回调之前完成执行

为什么我的小提琴正在工作

1）我已经将streamArr的值count传递给了局部变量arr 。

2）由于arr是函数getJSON局部变量，因此不会在for循环中修改其值。 因此匿名回调函数可以按预期工作。

Answer 3

让我们尝试先清理$.getJSON函数：

var twitchAPI = "https://api.twitch.tv/kraken/streams/"+streamsArr[count]+"?callback=?"

然后将成功回调封装在绑定了索引的闭包中：

$.getJSON(twitchAPI, function(count) {
    return function(data) {
        if (JSON.stringify(data.stream) == "null") {
            $("#displayHere").append("<div style=\"padding:1%;\"><span style=\"font-size:1.3em;\"> " + streamsArr[count] + "</span><span style=\"color:red;\">OFFLINE</span></div>");
        } else if (data.hasOwnProperty("error")) {
            $("#displayHere").append("<div style=\"padding:1%;\"><span style=\"font-size:1.3em;\"> " + streamsArr[count] + "</span><span style=\"color:red;\">UNAVAILABLE</span></div>");
        } else {
            $("#displayHere").append("<div style=\"padding:1%;\"><span style=\"font-size:1.3em;\"> " + JSON.stringify(data.stream.channel.display_name) + "</span>" + JSON.stringify(data.stream.game) + "</div>");
        }
    }
}(count));