jQuery Wait until async ajax calls are finished

Question

Hi I have 2 ajax calls in my script, I need them run asnyc to spare time, but I need the second to wait until the first is finished.

$.ajax({
 type: "POST",
 url: "getText.asmx/ws_getText",
 data: parO1,
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (msg) {
 alert(msg.d.data);
 }, 
 error: function () {
 chyba("chyba v požadavku", "df");
 }
});
if (parO2.length > 0) {
 $.ajax({
 type: "POST",
 url: "getText.asmx/ws_getText",
 data: parO2,
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (msg) {
 /*WAIT UNTIL THE FIRST CALL IS FINISHED AND THAN DO SOMETHING*/
 },
 error: function () {
 chyba("chyba v požadavku", "df");
 }
 });
}

So any ideas? Thanks

Answer 1

If using jQuery 1.5+, you can use jQuery.when() to accomplish this. Something like (shortened the ajax calls for brevity, just pass the objects as you're doing above)

$.when($.ajax("getText.asmx/ws_getText"), 
 $.ajax("getText.asmx/ws_getText")).done(function(a1, a2){
 // a1 and a2 are arguments resolved for the 
 // first and second ajax requests, respectively
 var jqXHR = a1[2]; // arguments are [ "success", statusText, jqXHR ]
});

You don't know in which order they will return so if you were rolling this by hand, you would need to check the state of the other request and wait until it has returned.

Answer 2

You need to wire up the second call to be contained within the callback of your first ajax call. Like so:

success: function(msg)
{
 alert(msg.d.data);
 if(par02.length > 0)
 {
 // Your 2nd ajax call
 }
},

Since JavaScript doesnt run in multiple threads on the client, you can't block the thread until certain conditions are met.

• user1352324: but this will make the execution time longer because the second call will be started after the first was finished, I was thinking about something like this: in first call success i can set some variable to true, and in second calls success i can do while(variable==false){wait} and than continue, but i don|t know how to write this properly
• Tejs: The only way to do a 'wait' would be to setTimeout and then check your global variable. But technically, that means your timeout could happen after the call is done, but is still waiting. You would be better off simply showing the user a spinning gif or something to indicate the server is working.

Answer 3

Using jquery

$.ajax({
 type: "POST",
 async:false, // ** CHANGED **
 url: "getText.asmx/ws_getText",
 data: parO1,
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (msg) {
 alert(msg.d.data);
 }
 , error: function () {
 chyba("chyba v požadavku", "df");
 }
 });

• vlasits: Thanks for your answer. I edited it by adding some code formatting to improve readability.
• flyingfisch: @vlasits that didn't seem to make it bold as one would think, I submitted an edit with a comment to explain what was happening

Answer 4

Here is another answer on running dual ajax requests. Like Tejs, the user makes an ajax call within the success method...

The poster states You're better off having the success method launch a new ajax request.."

Having two $.ajax() calls in one script