Chaining jQuery promises in parallel using simple alternative to $.when.apply

Question

When using jQuery promises sequentially, it is possible to chain them using then repeatedly:

e.g.

promise = promise.then(someoperation());

which also works inside a loop (very handy).

I have similar scenario where I needed to know when multiple parallel operations were completed, but not go through the coding overhead (e.g. added complexity) of creating an array of promises for the sole purpose of calling $.when.apply

After looking at my options, I came up with this pattern as an alternative:

promise = $.when(promise, anotherpromise);

To test it I came up with this test:

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/

Which appears to work just fine, so I started applying it to other example on StackOverflow.

The next one I tried with this pattern was to fix the example from Pass in an array of Deferreds to $.when():

My code:

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

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

Q. For some reason this one never fires the final event. Can anyone spot the problem?

Update

Based on a comment from @Karl-André Gagnon, it seems the initial promise can just be undefined and still work. Much simpler:

e.g.

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

Okay, it turns out this pattern does indeed work just fine, but you need to ensure the initial promise you chain to is already resolved:

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

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

In summary this pattern really is a simple alternative to creating an array just for use by $.when.apply.

Also, as pointed out by @Karl-André Gagnon, if you start with an undefined value, it does the same thing. Even better :)

function GetSomeDeferredStuff() {
    var promise;

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

Answer 2

Updated

I have similar scenario where I needed to know when multiple parallel operations were completed, but not go through the overhead of creating an array of promises for the sole purpose of calling

loop not utilized ; only $.when() ; same pattern as utilized when implementing through $.map() . Additionally , added "random" delay to jsfiddle ajax request ; promise.then() should not be called until all parallel function calls at $.when() completed , next called , queueName queue empty .

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/

---

When using jQuery promises sequentially, it is possible to chain them using then repeatedly ... which also works inside a loop (very handy).

Try utilizing .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/