Javascript 为什么数组会丢失其值？

我正在尝试使用twitch api构建一个列表，当用户想要查看谁在流媒体和谁没有流媒体时，该列表会更新。例如，当我按下offline按钮时，列表应该只包含'stream'值为null的用户。这是我的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用户=[“MedryBW”、“freecodecamp”、“storbeck”、“TB”、“habathcx”、“RobotCaleb”、“thomasballinger”、“noobs2nijas”、“beohoff”]；
var listOffline=[]；
$（文档）.ready（函数（）{
$.each（用户、函数（i、val）{
$（'.members'）。追加（“
”+val+”
”；
}); 
$（“#脱机”）。在（'click'，function（）上{
$.each（用户、函数（i、val）{
$.getJSON（“https://api.twitch.tv/kraken/streams/“+val，函数（数据）{
if（数据['stream']==null）{
listOffline.push（val）；
}
});
});
$（'.members li'）.remove（）；
$.each（列表脱机，函数（i，val）{
$（'.members'）。追加（“
”+val+”
”；
});
});
});

---

为什么“listOffline”数组会丢失在第一个数组结束时压入其中的值。在（'click'）函数上，$（'#offline'）中的每个块？如果您能帮助解决此问题，我们将不胜感激。

问题在于，您试图在填充列表之前追加列表。因为$.getJSON是一个异步函数。还要注意的是，在遍历用户之前，需要通过调用

remove

函数清空列表

您应该将列表附加到success回调函数中

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

$（“#脱机”）。在（'click'，function（）上{
$（'.members li'）.remove（）；
$.each（用户、函数（i、val）{
$.getJSON（“https://api.twitch.tv/kraken/streams/“+val，函数（数据）{
if（数据['stream']==null）{
listOffline.push（val）；
$（'.members'）。追加（“
”+val+”
”；
}
});
});

调用的

getJSON

是异步的，因此回调中的代码在下一个

之后执行。每个
。尝试移动最后一个
。每个
在回调中：

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

$（“#脱机”）。在（'click'，function（）上{
$（'.members li'）.remove（）；
$.each（用户、函数（i、val）{
$.getJSON（“https://api.twitch.tv/kraken/streams/“+val）.完成（函数（数据）{
if（数据['stream']==null）{
listOffline.push（val）；
$（'.members'）。追加（“
”+val+”
”；
}
});
});

您还可以使用延迟的
.done
来保持事情的整洁。
我的猜测是，$.getJson是异步的，这意味着在服务器返回所有结果之前到达并执行最后一个循环，因此您正在处理部分列表

要验证这一点，请添加以下打印输出：

在处理$.getJson响应的块中，在条件之前：

console.log('user ', val, ' retrieved);

在最后一次循环之后：

console.log('offline list processed');

在处理列表之后，您可能会看到检索（+处理并推送）用户

如果是这种情况，您可以执行以下操作之一：


使用承诺并仅在完成时执行最后一个循环
或者更简单，当您得到一个结果时，不要将其放入数组，只需执行以下操作：

 $('.members').append("<li>" + val + "</li>");

$（'.members'）。追加（“
”+val+”
”）；

这很接近，但是调用
$（'.members li'）.remove（）；
只会将最后一项添加到列表中（因为所有其他项都已被删除）。我刚刚编辑了它，现在它在调用$之前删除了成员列表。每个点击都会更好，但最终会得到一个类似“MedryBW”、“MedryBW”、“freecodecamp”、“MedryBW”的列表，“freecodecamp”，“storbeck”（重复次数很多），因为每个循环都会将整个数组附加到
ul
中-您不能在此回调中循环通过
listOffline
并附加到DOM中。@pherris，您完全正确。再次编辑。谢谢
 $('.members').append("<li>" + val + "</li>");