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 时，它为空。所以我的问题是，如何在for循环中将jQueryFunction的返回值存储到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，但保留 跟踪你做了多少。当它们都完成时，你就有了数组。创建你的 own deferred，当计数器启动时自己解决它，并返回承诺。

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

我不确定为什么your previous question（使用延迟）的答案不起作用。但问题的原因是您在任何 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);
        } 
    });
}