使用 $.when.apply 的简单替代方法并行链接 jQuery Promise

Question

当顺序使用 jQuery Promise 时，可以重复使用 then 链接它们：

例如

promise = promise.then(someoperation());

这也适用于循环（非常方便）。

我有类似的场景，我需要知道多个并行操作何时完成，但不经历为调用而创建一组承诺的编码开销（例如增加的复杂性） $.when.apply

在查看了我的选项后，我想出了这个模式作为替代方案：

promise = $.when(promise, anotherpromise);

为了测试它，我想出了这个测试：

var p = $.Deferred().resolve().promise();

[1,2,3,4,5,6,7,8,9,10].forEach(function(i){
     p = $.when(p, delay(i,i * 500));
});

p.then(function(){
   log("All done");
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/0rh8Lhv4/1/

这似乎工作得很好，所以我开始将它应用到 StackOverflow 上的其他示例。

我尝试使用此模式的下一个方法是修复 Pass in an array of Deferreds to $.when() 中的示例：

我的代码：

$("a").click(function () {
    var promise = GetSomeDeferredStuff();
    promise.then(function () {
        $("div").append("<p>All done!</p>");
    });
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/ts1dqwe3/1/

问。由于某种原因，这个永远不会触发最终事件。谁能发现问题？

更新

根据@Karl-André Gagnon 的评论，最初的promise 似乎可以未定义并且仍然有效。简单得多：

例如

var p;
[1,2,3,4,5,6,7,8,9,10].forEach(function(i){
     p = $.when(p, delay(i,i * 500));
});
p.then(function(){
   log("All done");
});

Answer 1

好的，事实证明这种模式确实可以正常工作，但是您需要确保链接到的初始 promise 已经解决：

function GetSomeDeferredStuff() {
    var promise = $.Deferred().resolve().promise();

JSFiddle： http://jsfiddle.ne/TrueBlueAussie/ts1dqwe3/2/

总而言之，这种模式确实是创建一个仅供$.when.apply使用的数组的简单替代方案。

另外，正如@Karl-André Gagnon 所指出的，如果您从一个未定义的值开始，它会做同样的事情。更好:)

function GetSomeDeferredStuff() {
    var promise;

JSFiddle： http://jsfiddle.net/TrueBlueAussie/ts1dqwe3/4/

Answer 2

更新

我有类似的情况，我需要知道何时多个并行 操作已完成，但没有经历创建的开销 一组仅用于调用的承诺

loop 未使用；只有$.when()；与通过 $.map() 实现时使用的模式相同。此外，将“随机”delay 添加到 jsfiddle ajax request ；在$.when() 的所有并行函数调用完成、next 已调用、queueName 队列为空之前，不应调用 promise.then()。

function GetSomeDeferredStuff(elem, name, cycles) {
    var el = (elem || {}),
        queueName = (name || "q"),
        len = (cycles || 5),
        request = function () {
            return $.ajax({
                type: "POST",
                url: '/echo/html/',
                data: {
                    html: "<p>Task #" + $.now() + " complete.",
                    delay: Math.random() * 5
                },
                success: function (data) {
                    $("div").append(data);
                }
            })
        }
    return $(el).queue(queueName, function (next) {
        return $.when(request()
                      , request()
                      , request()
                      , request()
                      , request())
                      .then(next)
    }).dequeue(queueName).promise(queueName);
}

$(function () {
    $("a").click(function () {
        var promise = GetSomeDeferredStuff();
        promise.then(function () {
            $("div").append("<p>All done!</p>");
        });
    });
});

jsfiddle http://jsfiddle.net/ts1dqwe3/10/

---

当顺序使用 jQuery Promise 时，可以将它们链接起来 然后反复使用 ... 这也适用于循环（非常方便）。

尝试使用.queue() .promise(queueName)

function GetSomeDeferredStuff(elem, name, cycles) {
    // if no `elem`:`this` object passed , utilize empty object `{}`
    var el = (elem || {})
          // if no `name` passsed, utilize `String` `"q"`
        , queueName = (name || "q")
          // if no `cycles` how many functions passed to `.queue(queueName)`,
          // pass `5` functions to `.queue(queueName)`
        , len = (cycles || 5);
    return $(el).queue(queueName
    , $.map(Array(len), function (_, index) {
        return function (next) {
            return $.ajax({
                type: "POST",
                url: '/echo/html/',
                data: {
                    html: "<p>Task #" + (1 + index) + " complete.",
                    delay: (index + 1) / 2
                },
                success: function (data) {
                    return $("div").append(data);
                }
            // call "next" function in `queue`
            }).then(next)
        }
       // `.dequeue(queueName)` , return `queueName` jQuery promise object,
       // when all functions in `queue(queueName)` called ; 
       // `.queue(queueName)` empty
    })).dequeue(queueName).promise(queueName);
}

$(function () {
    $("a").click(function () {
        var promise = GetSomeDeferredStuff();
        promise.then(function () {
            // `this`:`elem` , or `{}`
            $("div").append("<p>All done!</p>");
        });
    });
});

jsfiddle http://jsfiddle.net/ts1dqwe3/6/