javascript - 为什么数组会丢失它的值？

Question

我正在尝试使用 twitch API 构建一个列表，当用户想要查看谁在直播谁不直播时更新列表。例如，当我按下离线按钮时，列表应该只包含“stream”值为空的用户。这是我的 HTML:

<div class="container-fluid">
  <div id="menu">
    <ul class="menubar">
      <li><a id="all" href="#">All</a></li>
      <li><a id="online" href="#">Online</a></li>
      <li><a id="offline" href="#">Offline</a></li>
    </ul>
    <div id="users">
      <ul class="members">
      </ul>
    </div>
  </div>
</div>

这是我的 javascript(已经导入了 jQuery):

var users = ["MedryBW", "freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"];

var listOffline = [];

$(document).ready(function(){
  $.each(users, function(i , val){
      $('.members').append("<li>" + val + "</li>"); 
  }); 

  $('#offline').on('click', function(){
     $.each(users, function(i , val){
       $.getJSON("https://api.twitch.tv/kraken/streams/" + val , function(data){
          if(data['stream'] == null) {
            listOffline.push(val);
          }
       });
     });
    $('.members li').remove();
    $.each(listOffline, function(i , val) {
      $('.members').append("<li>" + val + "</li>");
    });

  });

});

为什么 'listOffline' 数组会丢失在 $('#offline').on('click') 函数中第一个 .each block 末尾插入其中的值？非常感谢任何解决此问题的帮助

Answer 1

问题是您试图在列表被填充之前追加它。因为 $.getJSON 是一个异步函数。另请注意，在遍历用户之前，您需要调用 remove 函数清空列表。

您应该在成功回调函数中附加列表

 $('#offline').on('click', function(){
 $('.members li').remove();
     $.each(users, function(i , val){
       $.getJSON("https://api.twitch.tv/kraken/streams/" + val , function(data){
          if(data['stream'] == null) {
            listOffline.push(val);
             $('.members').append("<li>" + val + "</li>");
          }
       });
     });