It may be a trivial question, but I am wondering if there is way to somehow know when the last ajax call gets pleted. So lets say I have 3 asynchronous ajax calls

$.ajax({
    type: "GET",
    datatype: "json",
    url: <my service url 1>
})
.done(function() {
    // handler
});

$.ajax({
    type: "GET",
    datatype: "json",
    url: <my service url 2>
})
.done(function() {
    // handler
});

$.ajax({
    type: "GET",
    datatype: "json",
    url: <my service url 3>
})
.done(function() {
    // handler
});

I want to show a progress bar when the first call starts and hide it when the last one finish. The issue is that even though I call them in sequence, because calls are asynchronous, I don't know how to tell when all calls finish. I could nest them one inside another, but then as far as I understand it will take much longer as one will have to wait for another to finish. Is there a way to sync it somehow?

It may be a trivial question, but I am wondering if there is way to somehow know when the last ajax call gets pleted. So lets say I have 3 asynchronous ajax calls

$.ajax({
    type: "GET",
    datatype: "json",
    url: <my service url 1>
})
.done(function() {
    // handler
});

$.ajax({
    type: "GET",
    datatype: "json",
    url: <my service url 2>
})
.done(function() {
    // handler
});

$.ajax({
    type: "GET",
    datatype: "json",
    url: <my service url 3>
})
.done(function() {
    // handler
});

I want to show a progress bar when the first call starts and hide it when the last one finish. The issue is that even though I call them in sequence, because calls are asynchronous, I don't know how to tell when all calls finish. I could nest them one inside another, but then as far as I understand it will take much longer as one will have to wait for another to finish. Is there a way to sync it somehow?

• javascript
• jquery
• ajax
• html

• 3 The simplest way would be to have a counter variable and just check if (counter != 3) return; in your callback handler. – Reinstate Monica Cellio Commented Oct 30, 2013 at 11:36
• I was thinking of that as well, then I have to make sure it also gets handled if call fails – fenix2222 Commented Oct 30, 2013 at 11:41
• Just add an error handler that increments it as well :) – Reinstate Monica Cellio Commented Oct 30, 2013 at 11:43
• $.when is awesome, thanks to Zzirconium – fenix2222 Commented Oct 30, 2013 at 11:46

2 Answers 2

I used to have the same need. If you can use jQuery, have a look there : http://lostechies./joshuaflanagan/2011/10/20/coordinating-multiple-ajax-requests-with-jquery-when/

Otherwise, you can pass a simple callback function through your AJAX call that es back in your progress indicator update at the end of each async treatment.

Already answered, but consider using global events instead -

AjaxStart - Triggered when any ajax call starts
AjaxStop - Triggered when all ajax calls are finished

Example -

$( document ).ajaxStart(function() {
  $( "#progressBar" ).show();
});

$( document ).ajaxStop(function() {
  $( "#progressBar" ).hide();
});

But you will need to make sure that the second call begins before the first call is plete or atleast it should be triggered immediately after the first one pletes.