JavaScript : Ordering AJAX calls

Question

I have 3 ajax call for particular functionality. 3rd call is dependent of first 2 calls i.e. for the 3 rd call first 2 calls has to be finished. But first 2 AJAX calls are independent. So I want them to be async and execute parallely.

How to structure these calls now? I tried to put them in nested success block of respective calls, but it that case first 2 calls are also not independent.

Kindly suggest with some sudo code, if possible.

Similar to this question/answer: http://stackoverflow.com/questions/21792277/jquery-getting-rid-of-nested-ajax-functions/21792307#21792307 — jfriend00, Feb 16 '14 at 05:02
Read a very good article regarding parallel and series AJAX call http://css-tricks.com/multiple-simultaneous-ajax-requests-one-callback-jquery/ — Fizer Khan, Feb 16 '14 at 05:58

Felix Kling · Accepted Answer · 2014-02-16T05:06:35.097

Use promises and $.when:

$.when(ajaxCall1(), ajaxCall2()).then(ajaxCall3);

where ajaxCallX is something like

function ajaxCall1() {
    return $.ajax(...);
}

This basically means "after both, the promise of ajaxCall1 and the promise of ajaxCall2 are resolved, execute the function ajaxCall3".

This works because the object returned by $.ajax (and similar methods) implements the promise interface. More information can also be found in the $.ajax documentation.

The responses of each Ajax call are passed to the then callback as arguments. You can acess them as

$.when(ajaxCall1(), ajaxCall2()).then(function(a1, a2) {
    // a1[0] is the response of the first call
    // a2[0] is the response of the second call
    ajaxCall3(a1[0], a2[0]);
});

Have a look at the $.when documentation for another example.

The OP probably needs the results from the first two ajax calls in order to feed into the third so perhaps you can explain how that might be accomplished when using this structure. — jfriend00, Feb 16 '14 at 05:00

score 1 · Answer 2 · answered Feb 16 '14 at 05:05

1

You can make use of ajaxComplete to call the third event after the first two events completes execution. ajaxComplete is an callback event which is fired after each and every ajaxCalls got response. Look over this link to find how it works https://api.jquery.com/ajaxComplete/

answered Feb 16 '14 at 05:05

Karthik Surianarayanan

630
3
21

I don't think this is useful here. `ajaxComplete` is triggered for *every* Ajax call that completed. So if you make two Ajax calls, the event is triggered twice. – Felix Kling Feb 16 '14 at 05:07
@FelixKling You can look which ajax call got over with ajaxComplete. So you can definitely use this and it works. – Karthik Surianarayanan Feb 16 '14 at 05:08
1

Why would use use ajaxComplete instead of just using the success handler for the actual ajax functions you want to monitor (or use promises on the actual ajax functions) ? – jfriend00 Feb 16 '14 at 05:17
@jfriend00 I am just saying that there is also some other options to do that. – Karthik Surianarayanan Feb 16 '14 at 05:35

JavaScript : Ordering AJAX calls

2 Answers2

Linked