对于每个不按正确顺序开火
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了对于每个不按正确顺序开火相关的知识，希望对你有一定的参考价值。
晚上好。
我目前正在开发一个使用twitch API的应用程序。
我第一次使用forEach JS命令。但由于某些原因我无法弄清楚，它似乎有点混乱，好像每个都没有以正确的顺序触发，并且好像该函数有时在下一个数组的元素被触发之前执行了好几次。
我构建了一个将问题分开的codepen：
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>");
})
})
})
答案
$.getJSON是异步的。你的forEach按照给定的顺序开始调用，但它们可以完全按任何顺序完成，完全混乱。
如果你想按顺序处理它们的完成，你可以将$.getJSON中的每个promise保存在一个数组中，等待它们用$.when完成（它们将并行运行，但是你的回调在它们全部完成之前不会运行） ，然后处理结果：
$.when.apply($, lives.map(element => $.getJSON(/*...*/))
.done((...results) => {
// All calls are done, process results
results.forEach(result => {
// ...
});
});
jQuery qazxsw poi将为你传递的每个承诺调用你的qazxsw poi回调。在上面，我们通过rest参数将它们收集到一个数组中，然后循环遍历它。
或者使用$.when伪数组的ES2015之前的语法：
done另一答案