JavaScript 动态添加具有不同输出的 div

Question

我对编程非常陌生，我正在做 freecodecamp twitch tv JSON API 项目，我设法在不同的 div 中获取名称，但每次刷新它都有不同的顺序(我希望每次顺序都相同)，我尝试了一切，有人可以解释一下我需要做什么吗？？？

  function twitchTV(){
    var twitchers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
    var output = "";    
    for (var i = 0; i < twitchers.length; i++){
      var channelName = twitchers[i];
      var apiQueryBio = 'https://wind-bow.glitch.me/twitch-api/users/' + channelName + '/';      
      $.getJSON(apiQueryBio, function(json) {            
        output += '<div class="name">' + json["name"] + '</div>';
        $("#name").html(output);        
      });     
    }    
    }
  
  twitchTV();

  body {
    margin-top: 30px;
  } 
  
  .name {
    border: 2px solid black;
    margin: 5px;
    padding: 3px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="name"></div>
  <div id="bio"></div>
  <div id="stream"></div>
</div>

Answer 1

函数$.getJSON执行异步请求，并且不保证执行顺序。

您可以使用函数$.when在整组请求结束后渲染HTML。

这样，顺序总是相同的，因为函数 $.when 等待每个注册的 ajax 请求(延迟对象)，然后使用简单的 for 循环，我们可以按照之前执行的顺序渲染HTML。

• 函数$.when()接收延迟对象。
• 此方法使用函数 apply通过数组传递延迟对象。
• 当每个延迟对象完成其工作时，将调用函数 done，因此将调用回调。

function twitchTV() {
  var twitchers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  var output = "";
  var requests = [];
  for (var i = 0; i < twitchers.length; i++) {
    var channelName = twitchers[i];
    var apiQueryBio = 'https://wind-bow.glitch.me/twitch-api/users/' + channelName + '/';
    requests.push($.getJSON(apiQueryBio));
  }

  $.when.apply(null, requests).done(function() {
    for (var json of arguments) {
      output += '<div class="name">' + json[0]["name"] + '</div>';
    }
    
    $("#name").html(output);
  });
}

twitchTV();

body {
  margin-top: 30px;
}

.name {
  border: 2px solid black;
  margin: 5px;
  padding: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="name"></div>
  <div id="bio"></div>
  <div id="stream"></div>
</div>