Question

我正在制作一个观众＆＃39;对于Twitch TV，它显示电视频道是在线，离线还是不存在。我正在使用Twitch TV的API。我已将通道名称保存在数组中，但是当我尝试将数组项追加到HTML元素时，它会显示“未定义”。该数组是一个全局变量。

我的代码是in this fiddle。

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

您已为变量count创建了一个闭包，因为JavaScript具有函数作用域，这就是count变量的值始终为10的原因。使用ES6，您可以使用let而不是{{ 1}}在for循环中，var将是块作用域。

Answer 2

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

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

＆＃13;

$(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>");
  }
});
}

＆＃13;

<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>

＆＃13;

为什么OP的代码无法正常工作

1）变量count是$.getJSON

中匿名回调函数的全局变量

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

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

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

1）我已将streamArr的{{1}}值传递给局部变量count。

2）因为arr是函数arr的局部变量，所以它的值不会在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));

无法访问$ .getJSON函数

3 个答案: