将 jQuery 延迟列表链接在一起时出现问题

Question

我正在尝试将jQuery Deferred对象的数组链接在一起，目的是在解决所有问题后调用最终函数。

但是，我无法让 $.when.apply($，延期(工作，但我无法弄清楚为什么它不起作用。

function callBackend(count) {
var deferred = $.Deferred();
setTimeout(function() {
$("div").append("<p>" + count + "</p>");
deferred.resolve();
}, 50);
return deferred.promise();
}
$(function() {
$("a").click(function() {
var promises = [];
for (i = 1; i <= 10; i++) {
var deferred = $.Deferred();
callBackend(i).then(function() {
deferred.resolve();
});
promises.push(deferred.promise());
}
$.when.apply($, promises).then(function() {
$("div").append("<p>All done!</p>");
});
});
});

我创建了一个小提琴来说明这个问题。 有人有想法吗？

http://jsfiddle.net/YNGcm/2244/

Answer 1

您可以直接使用在callBackend中创建的延迟元素。

function callBackend(count) {
var deferred = $.Deferred();
setTimeout(function() {
$("div").append("<p>" + count + "</p>");
deferred.resolve();
}, 500);
return deferred;
}
$(function() {
$("a").click(function() {
var promises = [];
for (i = 1; i <= 10; i++) {
var deferred = callBackend(i)
promises.push(deferred);
}
$.when.apply($, promises).then(function() {
$("div").append("<p>All done!</p>");
});
});
});

请参阅 http://jsfiddle.net/gaby/YNGcm/2243/

Answer 2

代替 jQuery 的延迟对象，您可以直接处理 Promise 对象本身。

function callBackend(count) {
return new Promise((resolve,reject) => {
(function(c){
setTimeout(function() {
$("div").append("<p>" + count + "</p>");
resolve(c);
}, 5000);
})(count);
});
}
$(function() {
$("a").click(function() {
var promises = [];
for (i = 1; i <= 10; i++) {
promises.push(callBackend(i));
}
Promise.all(promises).then(function() {
$("div").append("<p>All done!</p>");
});
});
});