Unexpected deferred object's behaviour

Question

Could anyoune please clarify what's wrong with the code below ( have read a lot of docs and examples, but still got no idea what's going on)

function t() {
    var d = $.Deferred();
    setTimeout(function(){
        d.resolve();
    }, 5000);
    return d.promise();
}
function test() {
    var dd = $.Deferred();
    $.ajax("/echo/json/").done(function() {
        dd = t();
        dd.done(function() { alert(" dd.done inside ajax")});
    });
    dd.done(function() { alert(" dd.done outside ajax")});
}
test();

the output was (in ~ 5 s):

"dd.done inside ajax:"

Why second .done is not working?

Have you popped open the developer console to check for any errors? — Pointy
– Pointy, Commented May 30, 2015 at 1:35
no errors, but strangely, first console.log ( replaced alert and url for run in browser) output has doubled. W.T.H.? — Paul Janssen
– Paul Janssen, Commented May 30, 2015 at 11:55

Pointy · Accepted Answer · 2015-05-30 01:38:26Z

2

Let's look at test():

function test() {
    var dd = $.Deferred();
    $.ajax("/echo/json/").done(function() {
        dd = t();
        dd.done(function() { alert(" dd.done inside ajax")});
    });
    dd.done(function() { alert(" dd.done outside ajax")});
}
test();

Local variable dd is initialized to a new jQuery Deferred object. Then, an ajax operation is started, and given a "done" callback that'll call the other test function t().

The $.ajax() call will return essentially immediately, long before its .done() callback is run. Right after that, another .done() callback is established for that Deferred instance created at the beginning of the function.

Now, when the ajax "done" callback runs, the value of dd — the initially-created Deferred object — will be overwritten with the Promise returned from t(). Eventually that .done() callback will be run, but nothing ever resolves the first Deferred instance, so that "outside" callback never happens.

answered May 30, 2015 at 1:38

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paul Janssen Over a year ago

Thanks. I see where my fault is

Ram · Accepted Answer · 2015-05-30 01:36:07Z

1

Because that deferred object is not resolved. You are creating 2 deferred objects and resolving one of them.

answered May 30, 2015 at 1:36

Ram

145k16 gold badges174 silver badges201 bronze badges

Comments

jfriend00 · Accepted Answer · 2015-05-30 02:44:56Z

0

Your second alert is never called because the original deferred you assign to the variable dd is never resolved and thus its .done() handler is never called.

You create a deferred and assign it to dd here:

var dd = $.Deferred();

And, then you set up a .done() handler with this:

dd.done(function() { alert(" dd.done outside ajax")});

But, when your ajax function finishes, you assign a different promise to the variable dd with this line:

dd = t();

And, thus nothing ever resolves the original promise so its .done() handler is never called.

I'd suggest this design instead:

function t() {
    var d = $.Deferred();
    setTimeout(function(){
        d.resolve();
    }, 5000);
    return d.promise();
}
function test() {
    return $.ajax("/echo/json/").then(function() {
        console.log("ajax call done");
        return t();
    }).then(function() {
        console.log("after timer");
    });
}

test().then(function() {
    console.log("everything done");
});

Working demo: http://jsfiddle.net/jfriend00/atafc5hj/

This illustrates the following concepts which are useful to know:

Using the promise already returned from $.ajax() rather than creating your own.
Chaining another activity to that promise.
Returning another promise from the .then() handler to make the sequence wait for that promise too.
Returning the chained promise from the main function so you can see when everything is done.

edited May 30, 2015 at 2:44

answered May 30, 2015 at 2:36

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

5 Comments

Paul Janssen Over a year ago

Great, now i saw things clearly, special thanks for suggested solution which facilitates understanding of a subject and saves me from weekend's headache

Paul Janssen Over a year ago

But...) there's still one thing seem unclear to me. I noticed that you used .then() for assigning callbacks instead of .done(). I run your code ( worked perfectly, thanks again) unchanged except using .done instead of .then here: **return $.ajax("/echo/json/").done(function() { which results in immediate execution of 2nd callback ("after timer"), as if it was assigned to already resolved deferred object.

jfriend00 Over a year ago

I use .then() because it is the promise standard way of doing things, not a jQuery invention.

Paul Janssen Over a year ago

thank you, so it looks like .done() is not useful for chaining promises

jfriend00 Over a year ago

@PaulJanssen - yes, only .then() supports full-borne chaining by returning new promises from within the callbacks. Once you learn how .then() works in standards-compliant promises, I've found no reason to ever use .done() with jQuery again. Plus, I see value in coding the standards-compliant way (when possible) which is to use .then().

Collectives™ on Stack Overflow

Unexpected deferred object's behaviour

3 Answers 3

1 Comment

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related