CODEWITHSUNDEEP
jqueryjquery-deferred
gen_Eric
gen_Eric

Reputation: 227310

Using $.when to combine promises

I am learning how to use jQuery's deferred, so I made a simple little example, so I could mess around.

function a() {
    var d = new $.Deferred,
        $A = $('#A'),
        $P = $('#P').progressbar();

    setTimeout(function() {
        $A.css('background-color', 'blue');
        d.notifyWith($P, [.5]);
    }, 2000);

    setTimeout(function() {
        $A.text('test');
        d.notifyWith($P, [1]);
        d.resolveWith($P, ['done']);
    }, 4000);

    return d.promise();
}
$('#G').click(function() {
    a().progress(function(x) {
        this.progressbar({
            value: x * 100
        });
    }).done(function(x) {
        alert(x)
    });
});​

DEMO: http://jsfiddle.net/NTICompass/3DDSa/3/

This example works great. After the operations complete, an alert pops up.

I read then you can combine multiple promises with $.when (which itself returns a promise), so I decided to break a() into 2 functions:

function a() {
    var d = new $.Deferred,
        $A = $('#A');

    setTimeout(function() {
        $A.css('background-color', 'blue');
        d.notify(.5);
    }, 2000);

    return d.promise();
}

function b() {
    var d = new $.Deferred,
        $A = $('#A');

    setTimeout(function() {
        $A.text('test');
        d.notify(1);
        d.resolve('done');
    }, 4000);

    return d.promise();
}

$('#G').click(function() {
    var $P = $('#P').progressbar();
    $.when(a(), b()).progress(function(x) {
        $P.progressbar({
            value: x * 100
        });
    }).done(function(x) {
        alert(x)
    });
});​

DEMO: http://jsfiddle.net/NTICompass/3DDSa/8/

I use $.when(a(), b()) to combine the 2 promises, but it's not working. The progress bar goes to 50%, but not to 100%, and my .done is never called.

It seems the the .notify (and the .resolve) inside b() aren't having any effect. What is wrong here? How do I use $.when to combine 2 promises?

Upvotes: 0

Views: 3027

Answers (1)

Esailija
Esailija

Reputation: 140244

It doesn't look like you are ever resolving the d in the function a. The promise returned by $.when is resolved when all the promises it contains are resolved. See http://jsfiddle.net/3DDSa/6

The arguments passed to .done in the when-promise are in the same order as when you created it. so x in done-callback refers to the value that a was resolved with (undefined) and arguments[1] refers to the value that b was resolved with ("done"). See http://jsfiddle.net/3DDSa/11

It looks like the progress callback to the when-promise works the same way, with increased arguments count.

Upvotes: 3

Related Questions