Question

I am learning how to use jQuery’s deferred, and I noticed an issue with using $.when along with .notifyWith.

I made an example without using $.when, and .notifyWith works perfectly

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/

Inside .progress, this is set to $P, so the progressbar moves correctly.

I wanted to split the 2 setTimeout actions into separate functions, so I did that and used $.when to combine the promises into one:

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

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

        return d.promise();
    }

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

        setTimeout(function() {
            $A.text('test');
            d.notifyWith($P, [.5]);
            d.resolve('b()');
        }, 4000);

        return d.promise();
    }
}())

$('#G').click(function() {
    $.when(a(), b()).progress(function(x, y) {
        this.progressbar({
            value: ((x || 0) + (y || 0)) * 100
        });
    }).done(function(x, y) {
        alert(x + ' ' + y)
    });
});​

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

For some reason this inside of .progress is not $P. Instead it’s the deferred object (or the promise object, I’m not really sure). Why isn’t this equal to $P?

Answer 1

This has been fixed in jQuery 1.8.0 where this is actually an array of contexts.

$('#G').click(function() {
    var index = 0;
    $.when(a(), b()).progress(function(x, y) {
        this[index++].progressbar({
            value: ((x || 0) + (y || 0)) * 100
        });
    }).done(function(x, y) {
        alert(x + ' ' + y)
    });
});​

DEMO: http://jsfiddle.net/3D4wq/1/ (Thanks to jaubourg from the jQuery bug tracker)

Note: That inside .progress (and .done), arguments.length will always be the number of elements passed to $.when, so this[arguments.length-1] won’t (always) work.

The 1st time .progress is called arguments is [.5, undefined].