对于每个未按正确顺序射击的人

Question

晚上好。

我目前正在开发一个使用 twitch API 的应用程序。

我第一次不得不使用 forEach JS 命令。但出于某种原因我无法弄清楚，它看起来有点混乱，好像每个都没有按正确的顺序触发，好像有时在触发下一个数组的元素之前该函数会执行几次。

我构建了一个代码笔来解决这个问题：

https://codepen.io/Hadrienallemon/pen/bLZJeX

正如您在笔中看到的那样，如果您多次单击测试按钮，结果并不总是按正确的顺序排列。

代码如下：

HTML :

<button id="button">test button</button>
<div class="wrapper"></div>

CSS :

html,body{
  height : 100%;
  width : 100%;
}

.wrapper{
  height : 90%;
  width : 100%;
}

.awnser{
  background-color : tomato;
  margin : 50px auto;
  width : 60%;
  min-height : 10%;

}

JS :

var lives = ["nat_ali","krayn_live","streamerhouse","merry"];
$("button").on("click",function(){ 
  lives.forEach(function(element){
    $(".wrapper").empty();
      $.getJSON("https://wind-bow.glitch.me/twitch-api/streams/"+ element +"?callback=?",function(quote){

        if (quote.stream != null){
          $(".wrapper").append("
          <div class = 'awnser'>
              <p>"+quote.stream.game+"</p>
          </div>");
        }
        else{
          $(".wrapper").append("
          <div class = 'awnser'>
            <span class = 'circle' style ='text-align : right'>
              <p style = 'display : inline-block;'>offline</p>
            </span>
          </div>");
       }

    })
      $.getJSON("https://wind-bow.glitch.me/twitch-api/users/"+ element +"?callback=?",function(quote){

        console.log(quote.logo);
        $(".awnser:last-child").append("
        <div style ='width : 10%; height : 10%;'>"+ quote.display_name +"
            <img src = '"+quote.logo+"' style = 'max-width : 100%;max-height : 100%;'></div>");

    }) 
  })  
})

Answer 1

$.getJSON 是 异步的 。您的 forEach 以给定的顺序开始 调用，但它们可以 complete 以任何顺序完全混乱。

如果你想按顺序处理它们的完成，你可以将 $.getJSON 中的每个承诺保存在一个数组中，等待它们用 $.when 完成（它们将运行并行，但你的回调不会运行直到它们全部完成），然后处理结果：

$.when.apply($, lives.map(element => $.getJSON(/*...*/))
.done((...results) => {
    // All calls are done, process results
    results.forEach(result => {
        // ...
    });
});

jQuery 的 $.when 将调用您的 done 回调，其中包含您传递给它的每个承诺的参数。在上面，我们通过 rest 参数将它们收集到一个数组中，然后循环遍历它。

或者使用 ES2015 之前的语法使用 arguments pseudo-array:

$.when.apply($, lives.map(function(element) { return $.getJSON(/*...*/)})
.done(function() => {
    var results = Array.prototype.slice.call(arguments);
    // All calls are done, process results
    results.forEach(function(result) {
        // ...
    });
});

Answer 2

// Your code:
/*var lives = ["nat_ali","krayn_live","streamerhouse","merry"];
$("button").on("click",function(){ 
  lives.forEach(function(element){
    $(".wrapper").empty();
      $.getJSON("https://wind-bow.glitch.me/twitch-api/streams/"+ element +"?callback=?",function(quote){

        if (quote.stream != null){
          $(".wrapper").append("
          <div class = 'awnser'>
              <p>"+quote.stream.game+"</p>
          </div>");
        }
        else{
          $(".wrapper").append("
          <div class = 'awnser'>
            <span class = 'circle' style ='text-align : right'>
              <p style = 'display : inline-block;'>offline</p>
            </span>
          </div>");
       }

    })
      $.getJSON("https://wind-bow.glitch.me/twitch-api/users/"+ element +"?callback=?",function(quote){

        console.log(quote.logo);
        $(".awnser:last-child").append("
        <div style ='width : 10%; height : 10%;'>"+ quote.display_name +"
            <img src = '"+quote.logo+"' style = 'max-width : 100%;max-height : 100%;'></div>");

    }) 
  })  
})*/

// You need to use JQuery's method to get the data back in promises to know the order in which they are received and map the data together:
const lives = ["nat_ali","krayn_live","streamerhouse","merry"];
$(".wrapper").empty();
const streams = lives.map((val) => {
  return $.getJSON(`https://wind-bow.glitch.me/twitch-api/streams/${element}?callback=?`;
});
const users = lives.map((val) => {
  return $.getJSON(`https://wind-bow.glitch.me/twitch-api/users/${element}?callback=?`;
});

$.when(streams).then(
  (streamsData) => {
    // Do what you need to for when the streamsData (array) is correlated to the array indices for the "lives" array defined above.
  },
  (err) => { /* handle API failures */ }
);
  
$.when(users).then(
  (usersData) => {
    // Do what you need to do for the usersData (array) that is correlated to the array indices for the "lives" array defined above.
  }
);

对于每个未按正确顺序射击的人

For each not firing in the right order

javascript

foreach

jquery

loops

twitch