不能访问$中的全局数组.getJSON函数

Can't access a global array inside $.getJSON function

本文关键字：数组 getJSON 函数 全局 访问 不能      更新时间：2023-09-26

我正在为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>");
  }
}); 
 } 
});
谁能告诉我毛病在哪里?谢谢。

您已经为变量count创建了一个闭包，因为JavaScript具有函数作用域，这就是为什么您的count变量的值总是10。在ES6中，可以在for循环中使用let而不是var，因此count将被块作用域。

$.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是异步的。所以匿名回调函数只有在get请求成功后才会被触发。

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

为什么我的小提琴在工作

1)我已将streamArr在count处的值传递给局部变量arr。

2)由于arr是函数getJSON的局部变量，因此在for循环中不会修改其值。所以匿名回调函数可以正常工作

让我们先试着清理一下$.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));
相关文章：