Warten, bis alle jQuery Ajax-Anfragen erledigt sind?

Question

Wie mache ich eine Funktion warten, bis alle jQuery Ajax-Anforderungen innerhalb einer anderen Funktion fertig sind?

Kurz gesagt, ich muss warten, bis alle Ajax-Anfragen erledigt sind, bevor ich die nächste ausführe. Aber wie?

Answer 1

JQuery definiert jetzt eine wenn die Funktion zu diesem Zweck.

Sie akzeptiert eine beliebige Anzahl von Deferred-Objekten als Argumente und führt eine Funktion aus, wenn alle diese Objekte aufgelöst sind.

Das heißt, wenn Sie (zum Beispiel) vier Ajax-Anfragen initiieren und dann eine Aktion durchführen wollen, wenn sie fertig sind, könnten Sie etwas wie folgt tun:

$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
    // the code here will be executed when all four ajax requests resolve.
    // a1, a2, a3 and a4 are lists of length 3 containing the response text,
    // status, and jqXHR object for each of the four ajax calls respectively.
});

function ajax1() {
    // NOTE:  This function must return the value 
    //        from calling the $.ajax() method.
    return $.ajax({
        url: "someUrl",
        dataType: "json",
        data:  yourJsonData,            
        ...
    });
}

Meiner Meinung nach sorgt dies für eine saubere und klare Syntax und vermeidet die Einbeziehung globaler Variablen wie ajaxStart und ajaxStop, die bei der Entwicklung Ihrer Seite unerwünschte Nebeneffekte haben könnten.

Wenn Sie nicht im Voraus wissen, wie viele Ajax-Argumente Sie abwarten müssen (d.h. Sie wollen eine variable Anzahl von Argumenten verwenden), ist es immer noch möglich, aber es ist nur ein bisschen schwieriger. Siehe Übergeben Sie ein Array von Deferreds an $.when() (und vielleicht jQuery .when-Fehlerbehebung mit variabler Anzahl von Argumenten ).

Wenn Sie eine genauere Kontrolle über die Fehlermodi der Ajax-Skripte usw. benötigen, können Sie das Objekt speichern, das von .when() - es ist ein jQuery Versprechen Objekt, das alle ursprünglichen Ajax-Abfragen enthält. Sie können .then() ou .fail() um detaillierte Erfolgs-/Misserfolgs-Handler hinzuzufügen.

Answer 2

Wenn Sie wissen wollen wenn alle ajax Anforderungen in Ihrem Dokument abgeschlossen sind, egal wie viele davon existieren, verwenden Sie einfach $.ajaxStop Veranstaltung auf diese Weise:

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

In diesem Fall müssen Sie weder erraten, wie viele Anfragen in der Anwendung laufen, die in der Zukunft enden könnten, noch müssen Sie sich in die komplexe Logik der Funktionen vertiefen oder herausfinden, welche Funktionen die Aufgabe haben HTTP(S) Anfragen.

$.ajaxStop kann hier auch an eine beliebige HTML Knoten, den Sie von dem Sie glauben, dass er von requst geändert werden könnte.

---

Aktualisierung:
Wenn Sie sich an ES Syntax, dann können Sie Promise.all für bekannte ajax Methoden:

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

Ein interessanter Punkt ist, dass es sowohl mit Promises y $.ajax Anfragen.

Hier ist die jsFiddle Demonstration.

---

Update 2:
Eine neuere Version mit async/await Syntax:

try {
  const results = await Promise.all([ajax1(), ajax2()])
  // do other actions
} catch(ex) { }

Answer 3

Ich habe eine gute Antwort von knorrig ich selbst, was genau das ist, was ich gesucht habe :)

jQuery ajaxQueue

//This handles the queues    
(function($) {

  var ajaxQueue = $({});

  $.ajaxQueue = function(ajaxOpts) {

    var oldComplete = ajaxOpts.complete;

    ajaxQueue.queue(function(next) {

      ajaxOpts.complete = function() {
        if (oldComplete) oldComplete.apply(this, arguments);

        next();
      };

      $.ajax(ajaxOpts);
    });
  };

})(jQuery);

Dann können Sie der Warteschlange eine Ajax-Anfrage wie folgt hinzufügen:

$.ajaxQueue({
        url: 'page.php',
        data: {id: 1},
        type: 'POST',
        success: function(data) {
            $('#status').html(data);
        }
    });

Answer 4

HINWEIS: Die obigen Antworten verwenden Funktionen, die zum Zeitpunkt der Erstellung dieser Antwort noch nicht existierten. Ich empfehle die Verwendung von jQuery.when() statt dieser Ansätze, aber ich lasse die Antwort für historische Zwecke stehen.

-

Sie könnten wahrscheinlich mit einem einfachen zählenden Semaphor auskommen, obwohl die Art und Weise, wie Sie es implementieren, von Ihrem Code abhängt. Ein einfaches Beispiel wäre etwas wie...

var semaphore  = 0,     // counting semaphore for ajax requests
    all_queued = false; // bool indicator to account for instances where the first request might finish before the second even starts

semaphore++;
$.get('ajax/test1.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

semaphore++;
$.get('ajax/test2.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

semaphore++;
$.get('ajax/test3.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

semaphore++;
$.get('ajax/test4.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

// now that all ajax requests are queued up, switch the bool to indicate it
all_queued = true;

Wenn Sie wollten, dass dies wie {async: false} funktioniert, aber Sie wollten den Browser nicht sperren, könnten Sie das Gleiche mit einer jQuery-Warteschlange erreichen.

var $queue = $("<div/>");
$queue.queue(function(){
    $.get('ajax/test1.html', function(data) {
        $queue.dequeue();
    });
}).queue(function(){
    $.get('ajax/test2.html', function(data) {
        $queue.dequeue();
    });
}).queue(function(){
    $.get('ajax/test3.html', function(data) {
        $queue.dequeue();
    });
}).queue(function(){
    $.get('ajax/test4.html', function(data) {
        $queue.dequeue();
    });
});

Answer 5

Verwenden Sie die ajaxStop Veranstaltung.

Nehmen wir zum Beispiel an, Sie haben eine Laden ... Meldung beim Abrufen von 100 Ajax-Anfragen und Sie möchten diese Meldung nach dem Laden ausblenden.

Aus dem jQuery doc :

$("#loading").ajaxStop(function() {
  $(this).hide();
});

Beachten Sie, dass auf alle Ajax-Anfragen auf dieser Seite gewartet wird.