我不知道如何修复这个代码

I have no idea how to fix this code

本文关键字：代码 何修复 我不知道      更新时间：2023-09-26

我真的失去了这个项目，我基本上想做一个页面，显示twitch频道的状态。这是相互依存的链接

问题是循环似乎在else语句完成之前就完成了，所以它每次只显示一个通道信息。一切都搞砸了。

我只是想为我的频道数组内的每个twitch频道显示一些信息。

$(document).ready(function(){
  function gatherChannels(){
    var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
    
    
    for(var i=0;i<channels.length;i++){
      currentChannel = channels[i];
     (function(someVar){ //<-- and u will get it here
       currentChannel = channels[someVar]; // all ur code
     
     })(i);//< -- here u pass ur loop i value
      
      
      $.getJSON("https://api.twitch.tv/kraken/streams/" + channels[i] + "?callback=?", function(data){
        
        if (data.stream !== null){
        $(".main-area").append("<div class ='channels' id='currentChannel'>" + data.stream.channel.status + "</div>");
        }
        
        else{
        $.getJSON("https://api.twitch.tv/kraken/channels/" + currentChannel + "?callback=?", function(info){
           $(".main-area").append("<div class ='channels' id='currentChannel'>" + info.url + "</div>");
        });
        }
      });
    }
  }
        
  
                     
    
  gatherChannels();
});

你的currentChannel变量被设置在一个循环中，这个循环正在被你的循环修改，当你的第一个ajax请求被返回的时候，循环已经结束了，这就是为什么你的信息。Url是最后一个。

您可以将ajax调用放入它自己的函数中，如下所示。

$(document).ready(function() {
  function gatherChannels() {
    var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"],
      getChannel = function getChannel(channel) {
        $.getJSON("https://api.twitch.tv/kraken/streams/" + channel + "?callback=?", function(data) {
          if (data.stream !== null) {
            $(".main-area").append("<div class ='channels' id='currentChannel" + channel + "'>" + data.stream.channel.status + "</div>");
          } else {
            $.getJSON("https://api.twitch.tv/kraken/channels/" + channel + "?callback=?", function(info) {
              $(".main-area").append("<div class ='channels' id='currentChannel'" + channel + ">" + info.url + "</div>");
            });
          }
        });
      }
    for (var i = 0; i < channels.length; i++) {
      getChannel(channels[i]);
    }
  }
  gatherChannels();
});
body {
  background-color: black;
  color: #fff;
}
h1 {
  text-align: center;
  background-color: gray;
  padding: 20px;
}
.main-area {
  margin-left: auto;
  margin-right: auto;
}
.channels {
  background: blue;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  color: white;
}
<html>
<head>
  <title>Twitch Streamer Status</title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="main-area">
      <h1>Twitch Streamers</h1>
    </div>
  </div>
</body>
</html>

相关文章：