Question

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

＆＃13;

  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();

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

您可以使用函数$.when在整套请求结束其作业后呈现HTML。

这样，顺序总是相同的，因为函数$.when等待每个已注册的ajax请求（延迟对象），然后使用简单的for-loop，我们可以根据先前执行的顺序。

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

＆＃13;

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();

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您的getJSON正在进行异步通话。您在此处传递的函数将在可变的时间后调用，具体取决于网络流量以及在服务器上处理该请求的顺序。结果将以随机顺序出现。

您可以做的是，每次获得结果时，不是直接在处理程序调用中附加文本，而是将结果放在映射中（JS对象的成员与原始值相关联）。 / p>

然后，通过遍历原始列表并拉出已存储在该对象中的值，将文本放在一起。它在某些方面效率较低，但它具有可预测的顺序。

var output = ""; 
var results = {};   
var twitchers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

function twitchTV(){
  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) {            
         results[channelName] = json["name"];
         output = generateOutputt();
    });     
  }    
}

function generateOutputt() {
    var output1 = "";
    for (var i = 0; i < twitchers.length; i++){
        var channelName = twitchers[i];
        output1 += '<div class="name">' + results[channelName] + '</div>';
            $("#name").html(output1); 
    }
    return output1;
}

请注意，generateOutputt将被多次调用，每次获得结果时都会调用一次。但结果将是正确的顺序。

Answer 3

由于响应是异步的，您需要自己进行排序。将结果存储在一个数组中，并在每个响应中重新呈现整个数组。

以下是按照twitchers中的顺序对数组进行排序的示例。

sudo apt-get upgrade
sudo apt-get update
sudo apt-get install -f

Working fiddle

Answer 4

这是一次尝试

  function twitchTV(){
  /// Add div and reorder them
  function AddDiv(div){
  $("#name").append(div);
  var divs =$("#name").find(".name");
    var divs = divs.sort(function (a, b) {
        return $(a).html() > $(b).html();
    });
      $("#name").append(divs); 
  }
  
    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) {            
            AddDiv('<div class="name">' + json["name"] + '</div>');
      });     
    } 
    }

  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 5

ajax调用是异步的。无法保证它会按照您发送的顺序完成。

您有两种选择之一：

1）总是等到上一个请求完成后再发出下一个请求

2）在调用请求之前添加占位符

选项1）

好处：易于设置/编码

Con：您不能一次运行多个请求

示例：

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

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>

选项2）

好处：多个并行呼叫缺点：需要更多html

  var apiQueryBio = 'https://wind-bow.glitch.me/twitch-api/users/';

function twitchTV(){
  var twitchers = [
    "ESL_SC2",
    "OgamingSC2",
    "cretetion",
    "freecodecamp",
    "storbeck",
    "habathcx",
    "RobotCaleb",
    "noobs2ninjas"
  ];
  for(var i = 0; i < twitchers.length; i++){
    var currentTwitch = twitchers[i];
    setPlaceholder(currentTwitch);
    setName(currentTwitch)
  }
   
}

function setName(twitcher){
  $.getJSON(apiQueryBio + twitcher + '/', function(json) {
    $('#' + twitcher).html(json['name']);
  });
}

function setPlaceholder(name){
  $("#name").append('<div class="name" id="' + name + '"><img src="http://gifimage.net/wp-content/uploads/2017/11/gif-of-3-dots-4.gif"/></div>');
}
  
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>

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

5 个答案: