等到全部jQuery Ajax請求都完成了嗎？

時間 2020-01-02

原文原文鏈接

我如何讓一個函數等到全部jQuery Ajax請求都在另外一個函數中完成以後？ css

簡而言之，在執行下一個請求以前，我須要等待全部Ajax請求完成。可是如何？ html

#1樓

一個小的解決方法是這樣的： ajax

// 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();
});

但願會有所幫助... json

#2樓

若是您要等到文檔中全部ajax請求都完成後，不管存在多少請求，均可以經過如下方式使用$.ajaxStop事件： async

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

在這種狀況下，無需猜想未來可能會完成的應用程序中可能有多少個請求。在某些狀況下，ajax請求多是函數內部邏輯的一部分，這可能很是複雜（例如，調用其餘函數），在這種狀況下，您可能不會等到該函數用其整個邏輯完成後纔開始，而不單單是等待ajax部分完成。 ide

$.ajaxStop也能夠綁定到您認爲可能被ajax修改的任何HTML節點。函數

一樣，此處理程序的目的是知道沒有活動的 ajax不要清除或重置某些內容。 oop

PS：若是您不介意使用ES6語法，則能夠將Promise.all用於已知的ajax方法。例： url

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

這裏有趣的一點是，它可與Promises和$.ajax請求一塊兒使用。這是jsFiddle演示的最後一個。 spa

#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;
}