javascript - 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 submitting it. I translate them with an ajax call to an external site. Depending on some values in the form i would need to do more or less translations. When all the translations are done (if any) I have to validate the form with ajax, and if its valid, then submit.

This is my aproach:
First, I have a function that sends the ajax call and do stuff with the data received:

function translate(...) {
    $("#ajaxCounter").val(parseInt($("#ajaxCounter").val()) + 1);
    $.ajax({
        ...
        success:function(data) {
            ...
            $("#ajacCounter").val(parseInt($("#ajaxCounter").val()) - 1);
        }
    });

Then, when the form is to be submitted I execute the following code:

$("#form").submit(function() {
    translatable_fields.each(function() {
        translate(...);
    });
    while (parseInt($("#ajaxCounter").val()) > 0) { null; }
    if (!(this).hasClass('ready')) {
        $.ajax({
            //validation
            success: function(data) {
                if (data['isValid']) {
                    $("#form").addClass('ready');
                    $("#form").submit();
                }
            }
        });
    }
    return true;
});

The problem is that the while loop in the submit function never ends.

If I execute the code without the while loop I can see the ajaxCounter input increasing when the translation functions start and decreasing when they end.

Answer 1

You can achieve this in a much neater fashion using the deferred objects returned from a $.ajax call. First you should get the translate() function to return the deferred:

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

Then you can put all those promises in to a single array:

var requests = [];
translatable_fields.each(function(){
    requests.push(translate(...));
});

Then you can apply that array to $.when:

$.when.apply($, requests).done(function(schemas) {
     console.log("All requests complete");
    // do something...
});