JavaScript 等待几个回调完成

Question

>我有一个以下javascript程序：

                function jQueryFunction(url, callback)
                { 
                    $.ajax
                            ({
                                type: "GET",
                                async: true,
                                url: url,
                                dataType: "jsonp",
                                jsonp: "callback",
                                jsonpCallback: "tpsHandler",
                                success: function(json)
                                {
                                    return callback(json);
                                }
                            });  
                }
                var jsonArray = new Array();
                for(var i = 0; i < 10; i++)
                {
                    jQueryFunction(url[i], function(json){
                       jsonArray[i] = json;
                    });
                }
                //process jsonArray

但是，当我在 for 循环后检查 jsonArray 时，它是空的。所以我的问题是如何将 jQueryFunction 的返回值存储在 for 循环中到 jsonArray 中，然后对其进行处理？

我已经尝试了$.when.apply（$，jsonArray）.done（function），但仍然相同，它是空的。

Answer 1

一个简单的方法：

function doTheAjax(url, callback) { 
  return $.ajax({
    type: "GET",
    async: true,
    url: url,
    dataType: "jsonp",
    jsonp: "callback",
    jsonpCallback: "tpsHandler"
  });
};
var reqs = [];
for(var i = 0; i < 10; i++) {
  reqs.push(doTheAjax(url[i]));
}
// send the array of requests to when, which will fire `done`
// when it's, well, done
$.when.apply($.when, reqs).done(function() {
  $.each(arguments, function(data) {
    // process the data
  });
});

或者，提出一堆请求并将它们放入jsonArray，但保留跟踪您正在制作多少。当它们全部完成时，你就有了数组。创建您的自己延期，等计数器起来了自己解决，还诺言。

var getJSON = function(url) {
  var dfd = $.Deferred();
  var count = 0;
  var total = 10;
  var jsonArray = [];
  for(var i = 0; i < total; i++) {
    doTheAjax(url[i]).done(function(json) {
      jsonArray.push(json);
      count++;
      if ( count >= total ) {
        dfd.resolve(jsonArray);
      }
    });
  }
  return dfd.promise();
};
getJSON().done(function(theCreatedJsonArray) {
  // do stuff
});

Answer 2

我不确定为什么您之前问题的答案（使用延期）不起作用。但是问题的原因是您在任何 ajax 响应到达之前检查数组。i在所有回调上引用相同的值时也存在问题。

一个简单的解决方法，如果您知道期望多少响应：

var arr = [];
for(var i = 0; i < 10; i++){
    jQueryFunction(url[i], function(json){
        arr.push(json);
        if(arr.length == 10) {
            // All 10 responses arrived!
            // DO STUFF FROM HERE
            // e.g., call another function
            console.log(arr);
        } 
    });
}