Question

I am calling multiple ajax requests at a time. I have a single function which calls the server and gets the response and processes it. Based on the parameters passed to it, I will decide what to be returned on the server side.

I want to call a function once all the ajax requests are complete as each would take different timespan depending on various aspects.

I tied jQuery http://api.jquery.com/jQuery.when/ but the function in the .then() gets called immediately.

Here is what I tried :

$.when(GetAjaxData(someUrl1), GetAjaxData(someUrl2), GetAjaxData(someUrl3)).then(alert("done"), alert("not done"));

is there any other approach that you can think of?

Answer 1

Little known fact, $.when() will execute the then() callback immediately if any one of the parameters fails. To quote the documentation:

http://api.jquery.com/jQuery.when/

In the multiple-Deferreds case where one of the Deferreds is rejected, jQuery.when immediately fires the failCallbacks for its master Deferred. Note that some of the Deferreds may still be unresolved at that point. If you need to perform additional processing for this case, such as canceling any unfinished ajax requests, you can keep references to the underlying jqXHR objects in a closure and inspect/cancel them in the failCallback.

There’s actually no built-in way of waiting until all of them are finished regardless of their success/failure status.

So, I built a $.whenAll() for you 🙂

http://jsfiddle.net/InfinitiesLoop/yQsYK/