jquery quand méthode

jQuery est une bibliothèque JavaScript largement utilisée dans le développement Web. Elle possède des fonctionnalités d'opération et de traitement d'événements DOM efficaces et rapides, ainsi que des capacités d'opération AJAX portables. La méthode when est une méthode de traitement des opérations asynchrones basée sur Promise, qui peut réaliser le traitement synchrone de plusieurs opérations asynchrones. Cet article présentera l'utilisation de la méthode jquery when et les scénarios d'application courants.

1. Syntaxe de base de la méthode jquery when
Lorsque nous devons effectuer plusieurs opérations asynchrones et passer à l'étape suivante une fois qu'elles sont toutes terminées, nous pouvons utiliser la méthode jquery when. Cette méthode peut réduire la logique de traitement asynchrone complexe et l'imbrication des fonctions de rappel correspondantes en créant un objet Promise et en renvoyant l'objet.

Lorsque toutes les opérations asynchrones réussissent, les paramètres de la fonction de rappel seront un tableau composé des résultats de chaque opération asynchrone ; si une opération asynchrone échoue, la fonction de rappel renverra la raison de l'échec de l'opération asynchrone. Cette méthode peut accepter n'importe quel nombre d'objets d'opération asynchrone ou d'objets itérables comme paramètres.

$.when(opération asynchrone 1, opération asynchrone 2, …).done(

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

).fail(

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

);

2 Scénarios d'utilisation courants de jquery lorsque la méthode

1. nécessite plusieurs requêtes asynchrones Après. tout est terminé, effectuez les étapes suivantes
   L'envoi de plusieurs requêtes AJAX en même temps est un cas d'utilisation courant dans le développement Web. Afin d'éviter que chaque requête ne déclenche le traitement de la requête suivante après réception de la réponse, nous pouvons utiliser la méthode jquery when pour attendre qu'elles soient toutes terminées. Par exemple :

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 ( réponse1, réponse2) {

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

});

2. Vérifiez si les données sont prêtes à tout moment
   Lors du chargement asynchrone des données, nous devons généralement afficher un indicateur de chargement ou empêcher l'utilisateur d'effectuer des opérations dénuées de sens. La méthode jquery when peut facilement implémenter cette fonction, par exemple :

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);

3. Attendez la fin de plusieurs animations avant d'effectuer l'étape suivante
   Nous pouvons encapsuler l'événement d'achèvement de l'animation dans un objet Promises (combinant plusieurs objets ensemble) pour attendre que toutes les animations soient terminées avant d'effectuer l'étape suivante, par exemple :

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");

});

Bien sûr, nous pouvons également combiner plusieurs éléments sur le même element Une animation est encapsulée dans un objet de promesse, tel que :

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");

});

En bref, la méthode jquery when est une solution de traitement synchrone adaptée à une variété d'opérations asynchrones. Le code est simple et facile à gérer, il est donc largement utilisé dans le développement réel. J'espère que cet article pourra fournir aux lecteurs des éclaircissements sur la syntaxe de base et les scénarios d'application courants de la méthode jquery when.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!