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?
Share Improve this question asked Oct 30, 2013 at 11:33 fenix2222fenix2222 4,7304 gold badges37 silver badges56 bronze badges 4-
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
Reset to default 3I 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.