$.Deferred.then() 函数不允许未知次数动态调用该函数？

Question

我在 Google 搜索 jQuery Deferred and Promise for sequential execution of synchronous and asynchronous funcitons 时发现了这个脚本。

这可以解决我按顺序执行脚本的问题。但是 then() 函数的问题是我无法知道我可以调用这个函数多少次。我可以调用函数 a() 3 次，下一次，我可以调用它 20 次，等等。所以，那不适用于 then()。 then() 函数不允许数组堆栈。那么，你们是如何让这个概念发挥作用的呢？

fucntion a(counter)
{
    $deferred = $.Deferred();

    //Run some scripts here...
    alert(counter);

    $deferred.resolve();
    return $deferred;
}
function Test()
{
    var d = $.Deferred(), 
    p=d.promise();
    p.then(a(0)).then(a(1)).then(a(2));
    d.resolve();
    return d;
}

Test().done(function(){ alert('done'); }).fail(function() { alert('fail'); });

Answer 1

我认为您要问的是如何链接和未知数量的电话。在这种情况下，您可以轻松循环并继续添加更多.then。例如：

for (var i=0; i < someLimit; i++) {
    p = p.then(a(i));
}

这将链接调用，以便它们一个接一个地被调用。如果您希望它们并行执行，那么 @jantimon 建议使用 .when 是可行的方法。

这是因为链接的工作原理。对.then 的调用会返回一个promise，以便您可以在返回的promise 上再次调用.then。见：http://api.jquery.com/deferred.then/

Answer 2

您可以使用jQuery.when。
请注意，这会同时执行多个异步操作：

jsFiddle Demo

给你a 函数，它返回一个异步承诺：

function a(counter, $target) {
    var $deferred = $.Deferred();
    setTimeout(function () {
        $target.text($target.text() + ' ' + counter);
        $deferred.resolve();
    }, 1000);
    return $deferred;
}

并行：

function Test1() {
    return $.when($.map([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], function (val, i) {
        return a(i, $('#test1'));
    }));
}

Test1().done(function () {
    $('#test1').css('font-weight', 'bold');
}).fail(function () {
    alert('fail');
});

要按顺序运行它，您需要一个 promiseLoop 助手：

function promiseLoop(arr, callback) {
    return arr.reduce(function (previousPromise, val, i) {
        return previousPromise.then(function (resultArray) {
            return $.when(callback(val, i)).then(function (res) {
                return resultArray.concat([res]);
            });
        });
    }, $.when([]));
}

function Test2() {
    return promiseLoop([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], function (val, i) {
        return a(i, $('#test2'));
    });
}


Test2().done(function () {
    $('#test2').css('font-weight', 'bold');
}).fail(function () {
    alert('fail');
});