[英]How to run code after separate ajax calls have completed within an each loop
我的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>
我的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()
在外部和內部ajax請求完成所有迭代之后，我需要以下代碼來運行：
$.each(allStreams, function(i, stream) {
$ul.append(Mustache.render(listTemplate, stream));
});
您可能會注意到，我已經嘗試在此處實現建議： 是否可以在for循環語句下完成所有ajax調用之后運行代碼？
...但這似乎僅在$ .each（）循環中只有一個ajax調用時才起作用。
如何在$ .each（）循環中如何處理兩個獨立的ajax請求，每個請求都進行多次迭代？ 目前，我的列表中僅顯示外部ajax迭代傳遞的實時流。
利用$ .ajax為您帶來回報的承諾這一事實。
在.then回調中，返回一個值將解決.then返回的promise-但是，返回一個Promise意味着.then將等待返回的Promise並解析為該值
這也意味着，通過使用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));
});
});
});
我當時正在考慮使用基於諾言的解決方案，但是您的情況似乎可以通過添加2個if子句來解決（如果使用諾言可以減少為1個）。 我已經將您的渲染邏輯放在函數中，並在所有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));
});
}
});
如何知道JQuery每個循環中的所有ajax調用何時完成？
[英]How to know when all the ajax calls in JQuery each loop are completed?
在兩個 ajax 請求都完成后，此代碼片段如何運行最終的 function？
[英]How does this code snippet run the final function after both ajax requests have completed?
在JQUERY中如何找到頁面中的所有ajax調用都已完成？
[英]In JQUERY how to find that all ajax calls in a page have been completed?
如果沒有jQuery，javascript如何檢查多個ajax調用是否已經完成，一旦有了，就執行一段代碼？
[英]Without jQuery, how can javascript check that multiple ajax calls have been completed, and once they have, execute a piece of code?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.