【发布时间】：2017-06-06 04:29:45
【问题描述】：
我的 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));
});
您可能会注意到，我已尝试在此处实施建议：Is it possible to run code after all ajax call completed under the for loop statement?
...但这似乎只在 $.each() 循环中只有一个 ajax 调用时才有效。
如何在我的 $.each() 循环中处理两个单独的 ajax 请求，每个请求都有多次迭代？目前只有外部 ajax 迭代提供的实时流显示在我的列表中。
【问题讨论】：
-
代码不是那么大 - 把它放在问题中
标签： javascript ajax each