等待多个getJSON调用完成

我有一个循环，它调用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 

Answer 1

如果你使用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']; }); 

Answer 2

getData将返回一个promise，它是deferred的只读版本。 然后，您可以使用$ .when根据这些承诺的分辨率执行代码