这里有一个关于正在发生的事情的人为例子:http://jsfiddle.net/adamjford/YNGcm/20/
HTML:
<a href="#">Click me!</a>
<div></div>
JavaScript:
function getSomeDeferredStuff() {
var deferreds = [];
var i = 1;
for (i = 1; i <= 10; i++) {
var count = i;
deferreds.push(
$.post('/echo/html/', {
html: "<p>Task #" + count + " complete.",
delay: count
}).success(function(data) {
$("div").append(data);
}));
}
return deferreds;
}
$(function() {
$("a").click(function() {
var deferreds = getSomeDeferredStuff();
$.when(deferreds).done(function() {
$("div").append("<p>All done!</p>");
});
});
});
我希望在所有延迟任务完成后显示“All done!”,但$.when()似乎不知道如何处理延迟对象数组。“All done!”首先发生,因为数组不是Deferred对象,因此jQuery继续执行并假定它已经完成。
我知道可以将对象传递到函数中,比如$。当(deferred1, deferred2,…, deferredX),但在我试图解决的实际问题中,不知道执行时会有多少个Deferred对象。
要将值数组传递给任何通常希望它们是单独参数的函数,请使用function .prototype。应用,所以在这种情况下,你需要:
$.when.apply($, my_array).then( ___ );
参见http://jsfiddle.net/YNGcm/21/
在ES6中,你可以使用…展开运算符改为:
$.when(...my_array).then( ___ );
在这两种情况下,由于您不太可能事先知道.then处理程序需要多少正式形参,因此该处理程序需要处理参数数组以检索每个promise的结果。
如果你正在使用angularJS或Q promise库的一些变体,那么你有一个.all()方法来解决这个确切的问题。
var savePromises = [];
angular.forEach(models, function(model){
savePromises.push(
model.saveToServer()
)
});
$q.all(savePromises).then(
function success(results){...},
function failed(results){...}
);
详见完整API:
https://github.com/kriskowal/q/wiki/API-Reference#promiseall
https://docs.angularjs.org/api/ng/service/美元问
上面的解决方法(谢谢!)并没有正确地解决返回提供给deferred的resolve()方法的对象的问题,因为jQuery使用单独的参数调用done()和fail()回调,而不是数组。这意味着我们必须使用参数pseudo-array来获取由deferreds数组返回的所有已解决/被拒绝的对象,这很难看:
$.when.apply($,deferreds).then(function() {
var objects = arguments; // The array of resolved objects as a pseudo-array
...
};
因为我们传递了一个延迟数组,所以最好返回一个结果数组。得到一个实际的数组而不是伪数组也会很好,这样我们就可以使用array .sort()这样的方法。
下面是一个受到when.js的when.all()方法启发的解决方案,它可以解决这些问题:
// Put somewhere in your scripting environment
if (typeof jQuery.when.all === 'undefined') {
jQuery.when.all = function (deferreds) {
return $.Deferred(function (def) {
$.when.apply(jQuery, deferreds).then(
// the calling function will receive an array of length N, where N is the number of
// deferred objects passed to when.all that succeeded. each element in that array will
// itself be an array of 3 objects, corresponding to the arguments passed to jqXHR.done:
// ( data, textStatus, jqXHR )
function () {
var arrayThis, arrayArguments;
if (Array.isArray(this)) {
arrayThis = this;
arrayArguments = arguments;
}
else {
arrayThis = [this];
arrayArguments = [arguments];
}
def.resolveWith(arrayThis, [Array.prototype.slice.call(arrayArguments)]);
},
// the calling function will receive an array of length N, where N is the number of
// deferred objects passed to when.all that failed. each element in that array will
// itself be an array of 3 objects, corresponding to the arguments passed to jqXHR.fail:
// ( jqXHR, textStatus, errorThrown )
function () {
var arrayThis, arrayArguments;
if (Array.isArray(this)) {
arrayThis = this;
arrayArguments = arguments;
}
else {
arrayThis = [this];
arrayArguments = [arguments];
}
def.rejectWith(arrayThis, [Array.prototype.slice.call(arrayArguments)]);
});
});
}
}
现在你可以简单地传入一个deferred /promises数组,并在回调中得到一个resolved/rejected对象数组,如下所示:
$.when.all(deferreds).then(function(objects) {
console.log("Resolved objects:", objects);
});
我想建议使用$.each的另一个方法:
We may to declare ajax function like:
function ajaxFn(someData) {
this.someData = someData;
var that = this;
return function () {
var promise = $.Deferred();
$.ajax({
method: "POST",
url: "url",
data: that.someData,
success: function(data) {
promise.resolve(data);
},
error: function(data) {
promise.reject(data);
}
})
return promise;
}
}
Part of code where we creating array of functions with ajax to send:
var arrayOfFn = [];
for (var i = 0; i < someDataArray.length; i++) {
var ajaxFnForArray = new ajaxFn(someDataArray[i]);
arrayOfFn.push(ajaxFnForArray);
}
And calling functions with sending ajax:
$.when(
$.each(arrayOfFn, function(index, value) {
value.call()
})
).then(function() {
alert("Cheer!");
}
)