Waiting for an array of Ajax calls to complete

Question

I have multiple ajax calls that I am making at one time. Once they are all done, I need to redirect the user to another page.

With the help of this answer, I created this:

function verifyAll() {
    var ajaxCalls = [];
    $.each($('.thing'), function(index, thing) {
        ajaxCalls.push(verifyOne($(thing).data('id'));
    });

    $.when(ajaxCalls).done(function() {
        console.log('Done verifying all');
    });
}

function verifyOne(id) {
    return $.ajax({
        type: 'GET',
        url: 'verify.html'
    }).done(function(data) {
        console.log('Done verifying one');
        //do something
    });
}

However, the $.when().done() function is called BEFORE the .done() is called on the individual ajax. Is there something I am doing wrong or is there another way to achieve my end goal?

Notice the difference between your code which passes an array of deferreds to `when` and the linked code which passes a number of arguments - that is relevant — Jamiec, Jul 27 '16 at 15:40

score 2 · Accepted Answer · answered Jul 27 '16 at 15:39

2

$.when() doesn't support arrays directly

Try

$.when.apply($, ajaxCalls).done(function() {

    console.log('Done verifying all');
    console.log(arguments);
});

answered Jul 27 '16 at 15:39

charlietfl

170,828
13
121
150

Or just `$.when(...ajaxCalls)` if you have access to ES6 spread operator. – MinusFour Jul 27 '16 at 15:44
1

@MinusFour that wouldn't work here as the rest operator is used when defining the parameters in the function definition, not when calling the function – Rory McCrossan Jul 27 '16 at 15:47
You must be seeing my old comment. I immediately changed it to `spread`. – MinusFour Jul 27 '16 at 15:52

Waiting for an array of Ajax calls to complete

1 Answers1