我有一个循环,它调用API并将结果编译成一个数组.我如何等待所有调用完成直到恢复执行？我看到一堆答案如何等待一个电话完成,但我不明白如何检查所有这些.如果我创建一个while循环,等待’obj’是正确的长度,页面就会停止,直到调用完成,这不是我想要的.请帮助？
function getData(id) {
var thisI = i;
var url = "www.whatever.com?id=" + id;
$.getJSON(url,function(data) {
obj[thisI]=data;
});
}
obj = [];
for (i=0; i < ids.length; i++) {
getData(ids[i]);
}
console.log(obj) //this works! I see all of the elements
document.getElementById("txt").innerHTML=obj[0]['field']; //TypeError: obj[0] is undefined
解决方法
如果你使用jQuery的延迟,这很容易.有一种方法,$.when,等待多个promises完成然后运行回调.这就是你应该在这里使用的.
不要使用全局obj变量,只需使用AJAX调用的返回值即可.
function getData(id) {
var thisI = i;
var url = "www.whatever.com?id=" + id;
return $.getJSON(url); // this returns a "promise"
}
因此,我们只需返回承诺,而不是填充obj.然后在你的循环中,你收集所有这些.
var AJAX = [];
for (i=0; i < ids.length; i++) {
AJAX.push(getData(ids[i]));
}
然后我们需要在完成所有这些操作时挂钩回调：
$.when.apply($,AJAX).done(function(){
// This callback will be called with multiple arguments,// one for each AJAX call
// Each argument is an array with the following structure: [data,statusText,jqXHR]
// Let's map the arguments into an object,for ease of use
var obj = [];
for(var i = 0,len = arguments.length; i < len; i++){
obj.push(arguments[i][0]);
}
document.getElementById("txt").innerHTML = obj[0]['field'];
});
