How to wait until nested async jQuery AJAX requests have finished?

Question

I'm using jQuery and I have a loop of asynchronous AJAX requests. I know I can wait for them all to be finished by using the handy '$.when.apply(array_of_requests).then()' method.

But I also have another set of AJAX requests that are only executed after each of the first requests are finished. I want to wait for them to finish too, but I'm not 100% sure I've found the best way.

Here's a simplified example of my requests:

var intital_data = [1,2,3,4,5,6,7,8,9,10];
var promises = [];
var promises_inner = [];

$.each(intitial_data, function(i, n) {
    var ajax_call = $.ajax({url:'http://www.domain.com/etc/'+n});
    promises.push(ajax_call);

    ajax_call.done(function(data) {
        var ajax_call_inner = $.ajax({url:'http://www.domain.com/etc/'+data.result});
        promises_inner.push(ajax_call_inner);

        ajax_call_inner.done(function(data) {
            // Do something with the content of data here.
        });
    });
});

So, when each of the ten looped AJAX requests is done, I make a second AJAX request based on the results of the first. That all works fine.

I then have something like this, because I want to wait until both the first ten requests (stored in the promises array) and the second lot (stored in promises_inner) are completed:

$.when.apply($, promises).then(
    function() {
        // The ten outer AJAX calls are finished now.

        $.when.apply($, promises_inner).then(
            function() {
                // The inner AJAX calls are finished now.
            }
        );
    }
);

Within the first $.when.apply().then()'s 'done' function the second lot of requests hasn't yet been completed, or even added to the promises_inner array. But I found that adding a nested $.when.apply().then() seems to work - within its 'done' function all the requests have finished.

But I'm not sure this is the best, and most robust, solution. I'm worried that it only works coincidentally - that it's causing just enough delay for the calls to have finished - rather than making logical sense.

Is there a better, more rock-solid, solution? Thanks.

Answer 1

Take a look at $.Callbacks in 1.7. I think you'll be excited about the flexibility of making your own "flows" and the ability to reuse them, run once, etc.

There's nothing wrong with what you did (the apply pattern may not be a first choice of most, they usually just list them in a $.when(a, b, c....)--but you may like the syntax of $.Callbacks better.