Multiple doneCallbacks in Deferred then

Question

The documentation for deferred.then() states that doneCallbacks is A function, or array of functions, called when the Deferred is resolved.

When I write either .then(new Array(getData2, showDiv)) or .then([getData2, showDiv]) none of them are called.

What is the correct syntax?

Update

Should the syntax for array be .then(new Array(getData2(), showDiv())) or .then([getData2(), showDiv()]) with parenthesis?

See http://jsfiddle.net/JSw5y/894/

Are you sure your deferred gets resolved or rejected? Have you tried `done()` and `fail()`? — jerone, Oct 02 '12 at 11:56
Most likely the deferred remains in the "pending" state (i.e. you have a logic error) because this syntax certainly works. Try this in the console: `$.Deferred().resolve().then([function() { console.log("foo"); }, function() { console.log("bar"); }]);` — Jon, Oct 02 '12 at 12:15
@CarlR: That fiddle has several issues (including stuff executing on the spot instead of being set as a callback). Here's a [fixed version](http://jsfiddle.net/JSw5y/896/). Is there something wrong with it? — Jon, Oct 02 '12 at 15:09
@Jon Your version works. What did I do wrong in this fiddle? http://jsfiddle.net/JSw5y/893/ — Carl R, Oct 03 '12 at 07:18
@CarlR: The AJAX requests are failing so their promises never get fulfilled and the handlers are never called (they are *success* handlers). If you change `.then` to `.always` you will find that they are called correctly. — Jon, Oct 03 '12 at 07:52
@Jon I'm afraid it's not that easy, because they are not failing. The log statements are put out correctly and the network tab shows http status 200. /echo/html is built into jsFiddle. — Carl R, Oct 03 '12 at 08:59
@CarlR: You are right (thanks for the tip). At first sight seems to be some kind of bug in jQuery: 1.8 will not work correctly using `.then`, although it will work with `.done` (wtf?). 1.7 will work correctly with both. Will investigate more later. — Jon, Oct 03 '12 at 09:44

Björn · Answer 1 · 2012-10-02T12:38:50.110

-1

This ~~seems to be~~ might be a bug in jQuery.

A simple workaround;

var CallbackHandler = (function () {
    var callbacks = [];

    return {
        'add': function (fn) {
            callbacks.push(fn);
            return this;
        },
        'executor': function () {
            var calledBy = this;
            $.each(callbacks, function () {
                this.call(calledBy);
            });
        }
    };

})();

CallbackHandler
    .add(function () {
        // first callback
    })
    .add(function () {
        // second callback
    });

// Called as:
$.when({a: 1})
 .then(CallbackHandler.executor);

edited Oct 02 '12 at 12:38

answered Oct 02 '12 at 12:07

Björn

29,019
9
65
81

A bug in jQuery? *Simple* workaround? Did you try something like `$.Deferred().resolve().then([function() { console.log("foo"); }, function() { console.log("bar"); }]);` to see that it works just fine? – Jon Oct 02 '12 at 12:14
@Jon - Of course I tried it (http://jsfiddle.net/gnu7R/) -- and yes, this is a *simple* workaround – Björn Oct 02 '12 at 12:31
Did you try the snippet above? There is absolutely no reason for all this. – Jon Oct 02 '12 at 12:41
@Jon - Did *YOU* try *my* fiddle? The $.get() method returns a Deferred jqHXR object -- and still the multiple callbacks doesn't get called. – Björn Oct 02 '12 at 12:48
I did. The first argument to [`.then`](http://api.jquery.com/deferred.then/) is an array of callbacks that will be invoked when the deferred completes *successfully*. Your fiddle uses a deferred which *fails*. *Of course* the callbacks are not executed. The example with the workaround uses a deferred which resolves. If you had bothered trying on jsfiddle with `$.when` instead of `$.get` it would have worked fine. – Jon Oct 02 '12 at 12:58
@Jon - No, they do not fail. Open up Firebug or Chrome Inspector and look for yourself! The returned Deferred object from $.get() can not handle multiple callbacks. – Björn Oct 04 '12 at 16:10

Multiple doneCallbacks in Deferred then

Update

1 Answers1