jquery when-Methode

王林
Freigeben: 2023-05-28 16:11:08
Original
821 Leute haben es durchsucht

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都成功结束后执行的代码块
}
Nach dem Login kopieren

).fail(

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

);

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"
Nach dem Login kopieren

});

var Promise2 = $.ajax({

url: "https://jsonplaceholder.typicode.com/todos/2",
method: "GET"
Nach dem Login kopieren

});

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

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

});

    Überprüfen Sie, ob die Daten zu irgendeinem Zeitpunkt bereit sind
  1. 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");
Nach dem Login kopieren

};

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

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

    Warten Sie, bis mehrere Animationen abgeschlossen sind, bevor Sie den nächsten Schritt ausführen.
  1. 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");
Nach dem Login kopieren
Nach dem Login kopieren

});

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");
Nach dem Login kopieren
Nach dem Login kopieren
});

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!