javascript - Is there a way to synchronize ajax calls - Stack Overflow

admin管理员组

文章数量:1333703

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

Share Improve this question Follow asked Oct 30, 2013 at 11:33 fenix2222fenix2222 4,73044 gold badges3737 silver badges5656 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

本文标签： javascriptIs there a way to synchronize ajax callsStack Overflow