jquery when-Methode

jQuery ist eine in der Webentwicklung weit verbreitete JavaScript-Bibliothek. Sie verfügt über effiziente und schnelle DOM-Betriebs- und Ereignisverarbeitungsfunktionen sowie tragbare AJAX-Betriebsfunktionen. Die when-Methode ist eine auf Promise basierende asynchrone Operationsverarbeitungsmethode, mit der die synchrone Verarbeitung mehrerer asynchroner Vorgänge realisiert werden kann. In diesem Artikel werden die Verwendung der JQuery-Methode und allgemeine Anwendungsszenarien vorgestellt.

1. Grundlegende Syntax der JQuery-When-Methode
Wenn wir mehrere asynchrone Vorgänge ausführen und mit dem nächsten Schritt fortfahren müssen, nachdem sie alle abgeschlossen sind, können wir die JQuery-When-Methode verwenden. Diese Methode kann die komplexe asynchrone Verarbeitungslogik und die entsprechende Verschachtelung von Rückruffunktionen reduzieren, indem ein Promise-Objekt erstellt und das Objekt zurückgegeben wird.

Wenn alle asynchronen Vorgänge erfolgreich sind, sind die Parameter in der Rückruffunktion ein Array, das aus den Ergebnissen jeder asynchronen Operation besteht. Wenn eine asynchrone Operation fehlschlägt, gibt die Rückruffunktion den Fehlergrund der asynchronen Operation zurück. Diese Methode kann eine beliebige Anzahl asynchroner Operationsobjekte oder iterierbarer Objekte als Parameter akzeptieren.

$.when(asynchronous operation 1, asynchronous operation 2, …).done(

function(异步操作1结果, 异步操作2结果, …) {
    // 在操作1和操作2都成功结束后执行的代码块
}

).fail(

function(错误原因) {
    // 当其他操作失败时执行的代码块
}

);

2. Häufige Verwendungsszenarien von jquery, wenn Methode

1. mehrere asynchrone Anforderungen erfordert Wenn alles abgeschlossen ist, führen Sie die nächsten Schritte aus. Das gleichzeitige Senden mehrerer AJAX-Anfragen ist ein häufiger Anwendungsfall in der Webentwicklung. Um zu verhindern, dass jede Anfrage nach Erhalt der Antwort die Verarbeitung der nächsten Anfrage auslöst, können wir mit der Methode jquery when warten, bis alle Anfragen abgeschlossen sind. Zum Beispiel:
   

var Promise1 = $.ajax({

url: "https://jsonplaceholder.typicode.com/todos/1",
method: "GET"

});

var Promise2 = $.ajax({

url: "https://jsonplaceholder.typicode.com/todos/2",
method: "GET"

});

$.when(promise1, Promise2).done(function (Antwort1, Antwort2) {

console.log(response1[0]); // 输出第一个Ajax响应数据
console.log(response2[0]); // 输出第二个Ajax响应数据

});

Überprüfen Sie, ob die Daten zu irgendeinem Zeitpunkt bereit sind
2. Während des asynchronen Ladens von Daten müssen wir normalerweise einen Ladeindikator anzeigen oder verhindern, dass der Benutzer bedeutungslose Vorgänge ausführt. Die jquery when-Methode kann diese Funktion bequem implementieren, zum Beispiel:
   

var callback = function() {

console.log("Do other stuff after data is loaded");

};

$.when($.ajax('/url/to/resource'))

.done(function(response) {
    console.log("Data loaded successfully");
})
.always(callback);

Warten Sie, bis mehrere Animationen abgeschlossen sind, bevor Sie den nächsten Schritt ausführen.
3. Wir können das Abschlussereignis der Animation in ein Promises-Objekt kapseln (indem mehrere Objekte miteinander kombiniert werden), um zu warten, bis alle Animationen abgeschlossen sind, bevor Sie den nächsten Schritt ausführen, z. B.:
   

var Animation1 = $elem1.animate({ ... }).promise();

var Animation2 = $elem2.animate({ ... }).promise();
var Animation3 = $elem3.animate( { ... }).promise();

$.when(animation1, animation2, animation3).done(function() {

console.log("All animations have completed");

});

Natürlich können wir auch mehrere Elemente auf demselben kombinieren element Eine Animation wird in ein Promise-Objekt gekapselt, wie zum Beispiel:

var PromisesArray = [];

promisesArray.push($element1.delay(1000).animate({ ... }).promise());

PromisesArray. push($element1.fadeOut().promise());
promisesArray.push($element2.slideUp().promise());

$.when.apply(null, PromisesArray).done(function( ) {

console.log("All animations have completed");

});

Kurz gesagt ist die JQuery-When-Methode eine synchrone Verarbeitungslösung, die für eine Vielzahl asynchroner Vorgänge geeignet ist. Der Code ist einfach und leicht zu verwalten und wird daher häufig in der tatsächlichen Entwicklung verwendet. Ich hoffe, dass dieser Artikel den Lesern etwas Aufschluss über die grundlegende Syntax und gängige Anwendungsszenarien der JQuery-When-Methode geben kann.

Das obige ist der detaillierte Inhalt vonjquery when-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!