等到全部jQuery Ajax请求都完成了吗？

我如何让一个函数等到全部jQuery Ajax请求都在另外一个函数中完成以后？

简而言之，在执行下一个请求以前，我须要等待全部Ajax请求完成。 可是如何？

---

#1楼

一个小的解决方法是这样的：

// Define how many Ajax calls must be done
var ajaxCalls = 3;
var counter = 0;
var ajaxCallComplete = function() {
    counter++;
    if( counter >= ajaxCalls ) {
            // When all ajax calls has been done
        // Do something like hide waiting images, or any else function call
        $('*').css('cursor', 'auto');
    }
};

var loadPersons = function() {
        // Show waiting image, or something else
    $('*').css('cursor', 'wait');

    var url = global.ctx + '/loadPersons';
    $.getJSON(url, function(data) {
            // Fun things
    })
    .complete(function() { **ajaxCallComplete();** });
};

var loadCountries = function() {
    // Do things
    var url = global.ctx + '/loadCountries';
    $.getJSON(url, function(data) {
            // Travels
    })
    .complete(function() { **ajaxCallComplete();** });
};

var loadCities = function() {
    // Do things
    var url = global.ctx + '/loadCities';
    $.getJSON(url, function(data) {
            // Travels
    })
    .complete(function() { **ajaxCallComplete();** });
};

$(document).ready(function(){
    loadPersons();
    loadCountries();
    loadCities();
});

但愿会有所帮助...

---

#2楼

若是您要等到文档中全部ajax请求都完成后，不管存在多少请求，均可以经过如下方式使用$.ajaxStop事件：

$(document).ajaxStop(function () {
      // 0 === $.active
  });

在这种状况下，无需猜想未来可能会完成的应用程序中可能有多少个请求。 在某些状况下，ajax请求多是函数内部逻辑的一部分，这可能很是复杂（例如，调用其余函数），在这种状况下，您可能不会等到该函数用其整个逻辑完成后才开始，而不单单是等待ajax部分完成。

$.ajaxStop也能够绑定到您认为可能被ajax修改的任何HTML节点。

一样，此处理程序的目的是知道没有活动的 ajax不要清除或重置某些内容。

PS：若是您不介意使用ES6语法，则能够将Promise.all用于已知的ajax方法。 例：

Promise.all([ajax1(), ajax2()]).then(() => {
 // all requests finished successfully
}).catch(() => {
 // all requests finished but one or more failed
})

这里有趣的一点是，它可与Promises和$.ajax请求一块儿使用。 这是jsFiddle演示的最后一个。

---

#3楼

若是您须要简单的东西； 一次完成回调

//multiple ajax calls above
        var callback = function () {
            if ($.active !== 0) {
                setTimeout(callback, '500');
                return;
            }
            //whatever you need to do here
            //...
        };
        callback();

---

#4楼

尝试这种方式。 在Java脚本函数中进行循环以等待ajax调用完成。

function getLabelById(id)
{
    var label = '';
    var done = false;
    $.ajax({
       cache: false,
       url: "YourMvcActionUrl",
       type: "GET",
       dataType: "json",
       async: false,
       error: function (result) {
         label='undefined';
         done = true;
        },
       success: function (result) {
            label = result.Message;
            done = true;
        }
     });

   //A loop to check done if ajax call is done.
   while (!done)
   {
      setTimeout(function(){ },500); // take a sleep.
   }

    return label;
}

---

#5楼

亚历克斯给出的解决方案工做正常。 相同的概念，但使用方式略有不一样（若是事先不知道通话数量）

http://garbageoverflow.blogspot.com/2014/02/wait-for-n-or-multiple-or-unknown.html