Wait until all ajax requests are done

Question

I need to wait until all my ajax functions are done, and then continue the exectution.

My particular case is that I need to translate some fields in a form before su

Answer 1

You can do this using deferred objects, but you do not need to use $.when.apply with an array if you are only interested in the final completion.

Instead you can chain parallel promises using the pattern promise = $.when(promise, another promise)

Change your translate to return the Ajax promise:

function translate(...) {
    ...
    return $.ajax({
        ...
    });
}

and your promise loop simply becomes:

var promise; // Start with an undefined promise - which is the same as a resolved promise for $.when
translatable_fields.each(function() {
    promise = $.when(promise, translate(...));
});

// Wait for all promises to complete
promise.done(function(){
    // now do the final code after all the ajax calls complete
});

Notes:

• This does create an extra promise per call to $.when, but the overhead is very small and the resulting code is quite simple.