[英]How to run code after separate ajax calls have completed within an each loop
My HTML code: 我的HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul id="output">
<template id="list-template">
<a href="{{url}}" target="_blank">
<li>
<p><strong>{{name}}</strong></p>
<p><img src="{{logo}}" alt="{{name}} logo"></p>
</li>
</a>
</template>
</ul>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
</body>
</html>
My JS code: 我的JS代码:
$( document ).ready(function() {
var $ul = $('#output');
var listTemplate = $('#list-template').html();
var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var allStreams = [];
var arr = [];
$.each(channels, function(i, channelName){
var xhr = $.ajax({
url: 'https://wind-bow.gomix.me/twitch-api/streams/' + channelName,
dataType: 'jsonp',
success: function(data) {
if (data.stream) { // i.e. if it's not null and currently streaming
allStreams[i] = {
name: data.stream.channel.display_name,
url: data.stream.channel.url,
logo: data.stream.channel.logo,
status: data.stream
};
} else { // i.e. it's not currently streaming, do a separate request to get the channel info.
$.ajax({
url: 'https://wind-bow.gomix.me/twitch-api/channels/' + channelName,
dataType: 'jsonp',
success: function(channelData) {
allStreams[i] = {
name: channelData.display_name,
url: channelData.url,
logo: channelData.logo
};
} // close inner success
}); // close inner $.ajax()
} // close else
} // close outer success
}); // close outer $.ajax()
arr.push(xhr);
}); // close $.each()
console.log(allStreams);
$.when.apply($, arr).then(function(){
$.each(allStreams, function(i, stream) {
$ul.append(Mustache.render(listTemplate, stream));
});
})
/* deleted accounts
- brunofin
- comster404
*/
}); // close .ready()
I need the following code to run after the outer and inner ajax requests have completed all of their iterations: 在外部和内部ajax请求完成所有迭代之后,我需要以下代码来运行:
$.each(allStreams, function(i, stream) {
$ul.append(Mustache.render(listTemplate, stream));
});
As you might notice, I've tried implementing the advice here: Is it possible to run code after all ajax call completed under the for loop statement? 您可能会注意到,我已经尝试在此处实现建议: 是否可以在for循环语句下完成所有ajax调用之后运行代码?
...but that seems only to work when there is just one ajax call in the $.each() loop. ...但这似乎仅在$ .each()循环中只有一个ajax调用时才起作用。
How do I get this to work with two separate ajax requests within my $.each() loop, each with multiple iterations? 如何在$ .each()循环中如何处理两个独立的ajax请求,每个请求都进行多次迭代? Currently only the live streams delivered by the outer ajax iterations are showing in my list. 目前,我的列表中仅显示外部ajax迭代传递的实时流。
Use the fact that $.ajax returns a promise to your advantage. 利用$ .ajax为您带来回报的承诺这一事实。
in .then callback, returning a value resolves the promise returned by .then - however, returning a Promise will mean that .then will wait on the returned Promise and resolve to that value 在.then回调中,返回一个值将解决.then返回的promise-但是,返回一个Promise意味着.then将等待返回的Promise并解析为该值
This also means, by using Array#map, no need for pushing to an array or array[i] = whatever type code - it's all handled by the .map and the resolved value of the promises 这也意味着,通过使用Array#map,无需推送到数组或array [i] =任何类型的代码-全部由.map和promises的解析值处理
$(document).ready(function() {
var $ul = $('#output');
var listTemplate = $('#list-template').html();
var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var arr = channels.map(function(channelName) {
return $.ajax({
url: 'https://wind-bow.gomix.me/twitch-api/streams/' + channelName,
dataType: 'jsonp'
}).then(function(data) {
if (data.stream) { // i.e. if it's not null and currently streaming
return {
name: data.stream.channel.display_name,
url: data.stream.channel.url,
logo: data.stream.channel.logo,
status: data.stream
};
} else { // i.e. it's not currently streaming, do a separate request to get the channel info.
return $.ajax({
url: 'https://wind-bow.gomix.me/twitch-api/channels/' + channelName,
dataType: 'jsonp'
}).then(function(channelData) {
return {
name: channelData.display_name,
url: channelData.url,
logo: channelData.logo
};
});
}
});
});
$.when.apply($, arr).then(function() {
var allStreams = [].slice.call(arguments);
$.each(allStreams, function(i, stream) {
$ul.append(Mustache.render(listTemplate, stream));
});
});
});
I was thinking of using promise based solution, but your scenario seems to be solved by adding 2 if clause(can be reduced to 1 if used promise). 我当时正在考虑使用基于诺言的解决方案,但是您的情况似乎可以通过添加2个if子句来解决(如果使用诺言可以减少为1个)。 I have put your render logic in a function and calling that when all ajax request comlpleted, that's it. 我已经将您的渲染逻辑放在函数中,并在所有ajax请求都完成后调用它,仅此而已。
$( document ).ready(function() {
var $ul = $('#output');
var listTemplate = $('#list-template').html();
var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var allStreams = [];
var arr = [];
$.each(channels, function(i, channelName){
var xhr = $.ajax({
url: 'https://wind-bow.gomix.me/twitch-api/streams/' + channelName,
dataType: 'jsonp',
success: function(data) {
if (data.stream) { // i.e. if it's not null and currently streaming
allStreams[i] = {
name: data.stream.channel.display_name,
url: data.stream.channel.url,
logo: data.stream.channel.logo,
status: data.stream
};
if(channels.length === allStreams.length){
allStreamsFetched();
}
} else { // i.e. it's not currently streaming, do a separate request to get the channel info.
$.ajax({
url: 'https://wind-bow.gomix.me/twitch-api/channels/' + channelName,
dataType: 'jsonp',
success: function(channelData) {
allStreams[i] = {
name: channelData.display_name,
url: channelData.url,
logo: channelData.logo
};
if(channels.length === allStreams.length){
allStreamsFetched();
}
} // close inner success
}); // close inner $.ajax()
} // close else
} // close outer success
}); // close outer $.ajax()
arr.push(xhr);
}); // close $.each()
function allStreamsFetched(){
console.log(allStreams);
$.each(allStreams, function(i, stream) {
$ul.append(Mustache.render(listTemplate, stream));
});
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.