5

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.

alain.janinm
  • 19,951
  • 10
  • 65
  • 112
Phil Gyford
  • 13,432
  • 14
  • 81
  • 143
  • I spoke too soon when I said that it seems to work. Sometimes it works, but other times, promises_inner hasn't had all of the nested AJAX queries added to it yet. So sometimes the inner $.when happens before everything has been returned. – Phil Gyford Nov 15 '11 at 12:01

2 Answers2

2

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.

AutoSponge
  • 1,444
  • 10
  • 7
  • Thanks for the pointer. The $.Callbacks docs are making my brain hurt but I expect it'll sink in eventually! In the meantime, do you think my nested $.when...s should be reliable? – Phil Gyford Nov 11 '11 at 17:39
  • We have to do similar things when processing rules in our insurance app because there are at least 10 services involved. The other thing you can do which may be easier to read is create a Deferred and only resolve it when the first when completes. Use that Deferred's promise as the .done for the next set of callbacks. Addy Osmani has a good article on Callbacks and likely more are coming. – AutoSponge Nov 11 '11 at 20:00
0

Try this with only one main promise to fullfill (resolve) per loop-run (here still called inner_promise).

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

initial_data.forEach(function(n) {
    // Create promise for the inner call here.
    var promise_inner = $.Deferred();
    promises_inner.push(promise_inner);

    $.ajax({url:'http://www.domain.com/etc/'+n}).done(function(data) {
        $.ajax({url:'http://www.domain.com/etc/'+data.result}).done(function(data) {
            // Do something with the content of data here.
            promise_inner.resolve();
        });
    });
});
console.log("promises_inner contains " + promises_inner.length + " promises") // should contain all the 10 promises

$.when.apply($,promises_inner).done(function() {
    // The inner AJAX calls are finished now
})
Squ1sh
  • 27
  • 3