raising jquery deferred.then() once all deferred o

Question

i have two javascript functions, save() and saveAll(), set up as below:

function save(data) {
    return $.post('/save', data);
}

function saveAll(callback) {
    var dataArray = [];
    $.each(dataArray, function() {
        save(this);
    });
    callback();
}

i'm interested in modifying saveAll() so that it leverages jquery deferred objects, and raises the callback function once all save() operations have completed. however, i'm unsure of the exact syntax... specifically with relation to the $.each() inside of the $.when(). would it be something like this?

function saveAll(callback) {
    var dataArray = [];
    $.when(
        $.each(dataArray, function() {
            return save(this);
        })
    ).then(callback);
}

Answer 1

The problem I think is that $.each is returning your dataArray, not a list of Deferred objects like you want to feed to $.when.

Answer 2

as Eli pointed out, $.when() accepts a comma separated list of arguments and not an array. using Function.apply() to pass in the array seems to do the trick.

function saveAll(callback) {
    var dataArray = [], deferreds = [];
    $.each(dataArray, function() {
        deferreds.push( save() );
    });

    $.when.apply(window, deferreds).then(callback);
}

Answer 3

You should be able to pass a comma-separated list of deferred objects to $.when and .then will execute once they all have resolved.

http://api.jquery.com/jQuery.when/