有没有一种方法可以同步ajax调用？

Question

这可能是一个琐碎的问题，但我想知道是否有办法在最后一个ajax调用完成时得知。假设我有3个异步ajax调用。

$.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
});

当第一个调用开始时，我希望显示一个进度条，并在最后一个调用完成时隐藏它。问题在于，尽管我按顺序调用它们，但由于调用是异步的，我不知道何时告诉所有调用完成。我可以将它们嵌套在另一个中，但据我了解，这将需要更长的时间，因为一个将不得不等待另一个完成。有没有一种方法可以同步它？

- fenix2222

---

最简单的方法就是使用一个计数器变量，在回调函数处理程序中检查 if (counter != 3) return;。 - Reinstate Monica Cellio

我也在考虑这个问题，那么如果调用失败，我必须确保它也得到处理。 - fenix2222

只需添加一个错误处理程序，同时也会递增它 :) - Reinstate Monica Cellio

$.when非常棒，感谢Zzirconium。 - fenix2222

Answer 1

我以前也有同样的需求。如果您能使用jQuery，请看这里：http://lostechies.com/joshuaflanagan/2011/10/20/coordinating-multiple-ajax-requests-with-jquery-when/。否则，您可以通过您的AJAX调用传递一个简单的回调函数，在每个异步处理结束时返回到您的进度指示器更新中。

- Zzirconium

---

这看起来非常整洁。我会尝试一下，看看它是否有效。比编写一些计数器处理或同步代码要好得多。 - fenix2222

你需要像文档中的第二个示例那样使用.then()。文档链接：http://api.jquery.com/jQuery.when/ - Zzirconium

是的，我使用了$.when(func1(), func2()).then(function(res1, res2) {}).fail(function() {})。 - fenix2222

Answer 2

已经有答案了，但考虑使用全局事件代替 -

AjaxStart - 当任何ajax调用开始时触发
AjaxStop - 当所有ajax调用完成时触发

示例 -

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

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

但是你需要确保第二次调用在第一次完成之前开始，或者至少在第一次完成后立即触发第二次调用。

- Avi