Explication détaillée de l'object_jquery différé de jQuery

1. Qu'est-ce qu'un objet différé ?

Dans le processus de développement de sites Web, nous rencontrons souvent certaines opérations JavaScript qui prennent beaucoup de temps. Parmi elles, il existe à la fois des opérations asynchrones (telles que la lecture ajax des données du serveur) et des opérations synchrones (telles que la traversée d'un grand tableau), et les résultats ne sont pas disponibles immédiatement.

L'approche habituelle consiste à leur spécifier des fonctions de rappel. Autrement dit, spécifiez à l'avance quelles fonctions doivent être appelées une fois leur exécution terminée.

Cependant, jQuery est très faible en ce qui concerne les fonctions de rappel. Afin de changer cela, l'équipe de développement jQuery a conçu l'objet différé.

Pour faire simple, l'objet différé est la solution de fonction de rappel de jQuery. En anglais, defer signifie « retard », donc la signification d'un objet différé est de « retarder » l'exécution jusqu'à un certain point dans le futur.

Il résout le problème de la gestion des opérations fastidieuses, offre un meilleur contrôle sur ces opérations et une interface de programmation unifiée. Ses principales fonctions peuvent être résumées en quatre points. Ci-dessous, nous apprendrons étape par étape à travers un exemple de code.

2. Méthode d'écriture en chaîne de l'opération ajax

Tout d’abord, passons en revue la manière traditionnelle d’écrire l’opération ajax de jQuery :

Copier le code Le code est le suivant :

$.ajax({
URL : "test.html",
Succès : fonction(){
alert("Haha, réussi!");
　　},
​​erreur :fonction(){
alert("Quelque chose s'est mal passé !");
　　}
});

Dans le code ci-dessus, $.ajax() accepte un paramètre d'objet. Cet objet contient deux méthodes : la méthode success spécifie la fonction de rappel une fois l'opération réussie et la méthode d'erreur spécifie la fonction de rappel après l'échec de l'opération.

Une fois l'opération $.ajax() terminée, si vous utilisez une version de jQuery inférieure à 1.5.0, l'objet XHR sera renvoyé et vous ne pourrez pas effectuer d'opérations en chaîne si la version est supérieure à 1.5.0 ; , les objets Deferred renvoyés peuvent être chaînés.

Maintenant, la nouvelle façon d'écrire est la suivante :

Copier le code Le code est le suivant :

​$.ajax("test.html")
​.done(function(){ alert("Haha, réussi!"); })
​.fail(function(){ alert("Erreur!"); });

Comme vous pouvez le voir, done() est équivalent à la méthode success et fail() est équivalent à la méthode error. Après avoir adopté la méthode d'écriture en chaîne, la lisibilité du code est grandement améliorée.

3. Spécifiez plusieurs fonctions de rappel pour la même opération

L'un des grands avantages de l'objet différé est qu'il vous permet d'ajouter librement plusieurs fonctions de rappel.

En prenant le code ci-dessus comme exemple, si une fois l'opération ajax réussie, en plus de la fonction de rappel d'origine, je souhaite également exécuter une autre fonction de rappel, que dois-je faire ?

C'est très simple, il suffit de l'ajouter à la fin.

Copier le code Le code est le suivant :

​$.ajax("test.html")
​.done(function(){ alert("Haha, réussi!");} )
​.fail(function(){ alert("Erreur!"); } )
​.done(function(){ alert("Deuxième fonction de rappel!");} );

Vous pouvez ajouter autant de fonctions de rappel que vous le souhaitez, et elles seront exécutées dans l'ordre dans lequel elles sont ajoutées.

4. Spécifiez les fonctions de rappel pour plusieurs opérations

Un autre grand avantage de l'objet différé est qu'il vous permet de spécifier une fonction de rappel pour plusieurs événements, ce qui n'est pas possible avec l'écriture traditionnelle.

Veuillez regarder le code suivant, qui utilise une nouvelle méthode $.when() :

Copier le code Le code est le suivant :

​$.when($.ajax("test1.html"), $.ajax("test2.html"))
​.done(function(){ alert("Haha, réussi!"); })
​.fail(function(){ alert("Erreur!"); });

La signification de ce code est d'effectuer d'abord deux opérations $.ajax("test1.html") et $.ajax("test2.html") Si les deux réussissent, exécutez le rappel spécifié par la fonction done(). ; si l'un ou les deux échouent, la fonction de rappel spécifiée par fail() est exécutée.

5. Interface de fonction de rappel pour les opérations courantes (Partie 1)

Le plus grand avantage de l'objet différé est qu'il étend cet ensemble d'interfaces de fonction de rappel des opérations ajax à toutes les opérations. En d'autres termes, toute opération - qu'il s'agisse d'une opération ajax ou d'une opération locale, qu'il s'agisse d'une opération asynchrone ou synchrone - peut utiliser diverses méthodes de l'objet différé pour spécifier une fonction de rappel.

Regardons un exemple spécifique. Supposons qu'il y ait une attente d'opération qui prend du temps :

Copier le code Le code est le suivant :

var attendre = fonction(){
　　var tâches = fonction(){
alert("Exécution terminée!");
　　};
　　setTimeout(tâches,5000);
};

Que devons-nous faire si nous spécifions une fonction de rappel pour cela ?

Naturellement, vous penserez que vous pouvez utiliser $.when() :

Copier le code Le code est le suivant :

​$.quand(attendre())
​.done(function(){ alert("Haha, réussi!"); })
​.fail(function(){ alert("Erreur!"); });
[code]

Cependant, si elle est écrite ainsi, la méthode done() sera exécutée immédiatement et ne fonctionnera pas comme une fonction de rappel. La raison est que les paramètres de $.when() ne peuvent être que des objets différés, donc wait() doit être réécrit :

[code]
var dtd = $.Deferred(); // Créer un nouvel objet différé
var attendre = function(dtd){
　　var tâches = fonction(){
alert("Exécution terminée!");
　　 dtd.resolve(); // Changer l'état d'exécution de l'objet différé
　　};
　　setTimeout(tâches,5000);
retourner dtd ;
};

Maintenant, la fonction wait() renvoie un objet différé, afin que des opérations en chaîne puissent être ajoutées.

Copier le code Le code est le suivant :

​$.quand(attendre(dtd))
​.done(function(){ alert("Haha, réussi!"); })
​.fail(function(){ alert("Erreur!"); });

Une fois la fonction wait() exécutée, la fonction de rappel spécifiée par la méthode done() s'exécutera automatiquement.

6. Méthode deferred.resolve() et méthode deferred.reject()

Si vous regardez attentivement, vous constaterez qu'il y a un autre endroit dans la fonction wait() ci-dessus que je n'ai pas expliqué. C'est ce que fait dtd.resolve() ?

Pour clarifier cette question, nous devons introduire un nouveau concept « état d'exécution ». jQuery stipule que les objets différés ont trois états d'exécution : inachevé, terminé et échoué. Si l'état d'exécution est « terminé » (résolu), l'objet différé appelle immédiatement la fonction de rappel spécifiée par la méthode done() ; si l'état d'exécution est « échoué », la fonction de rappel spécifiée par la méthode fail() est appelée ; si l'état d'exécution est "infructueux" Terminé", continuez à attendre ou appelez la fonction de rappel spécifiée par la méthode progress() (ajoutée dans la version jQuery 1.7).

Lors de l'opération ajax de la partie précédente, l'objet différé changera automatiquement son statut d'exécution en fonction du résultat renvoyé ; cependant, dans la fonction wait(), ce statut d'exécution doit être spécifié manuellement par le programmeur. La signification de dtd.resolve() est de changer l'état d'exécution de l'objet dtd de "inachevé" à "terminé", déclenchant ainsi la méthode done().

De même, il existe également une méthode deferred.reject(), qui modifie l'état d'exécution de l'objet dtd de « incomplet » à « échoué », déclenchant ainsi la méthode fail().

Copier le code Le code est le suivant :

var dtd = $.Deferred(); // Créer un nouvel objet différé
var attendre = function(dtd){
　　var tâches = fonction(){
alert("Exécution terminée!");
　　 dtd.reject(); // Changer l'état d'exécution de l'objet Différé
　　};
　　setTimeout(tâches,5000);
retourner dtd ;
};
​$.quand(attendre(dtd))
​.done(function(){ alert("Haha, réussi!"); })
​.fail(function(){ alert("Erreur!"); });

7. Méthode différée.promise()

Il y a encore des problèmes avec la manière d'écrire ci-dessus. Autrement dit, dtd est un objet global, son statut d'exécution peut donc être modifié de l'extérieur.

Veuillez regarder le code ci-dessous :
​

Copier le code Le code est le suivant :

var dtd = $.Deferred(); // Créer un nouvel objet différé
var attendre = function(dtd){
　　var tâches = fonction(){
alert("Exécution terminée!");
　　 dtd.resolve(); // Changer l'état d'exécution de l'objet Différé
　　};
　　setTimeout(tâches,5000);
retourner dtd ;
};
​$.quand(attendre(dtd))
​.done(function(){ alert("Haha, réussi!"); })
​.fail(function(){ alert("Erreur!"); });
​dtd.resolve();

J'ai ajouté une ligne de dtd.resolve() à la fin du code, ce qui a modifié l'état d'exécution de l'objet dtd, provoquant ainsi l'exécution immédiate de la méthode done(), et le "Haha, réussi !" une boîte de dialogue d'invite est apparue, etc. 5 Après quelques secondes, la boîte d'invite « Exécution terminée ! » apparaîtra.

Pour éviter cette situation, jQuery fournit la méthode deferred.promise(). Sa fonction est de renvoyer un autre objet différé sur l'objet différé d'origine. Ce dernier ouvre uniquement les méthodes qui ne sont pas liées au changement de l'état d'exécution (comme la méthode done() et la méthode fail()), et bloque les méthodes liées au changement de l'état d'exécution. état d'exécution (comme la méthode solve() et la méthode rejet()), afin que l'état d'exécution ne puisse pas être modifié.

Veuillez regarder le code ci-dessous :
​

Copier le code Le code est le suivant :

var dtd = $.Deferred(); // Créer un nouvel objet différé
var attendre = function(dtd){
　　var tâches = fonction(){
alert("Exécution terminée!");
　　 dtd.resolve(); // Changer l'état d'exécution de l'objet Différé
　　};

　　setTimeout(tâches,5000);
Return dtd.promise(); // Renvoie l'objet de promesse
};
var d = wait(dtd); // Créer un nouvel objet d et opérer sur cet objet à la place
​$.quand(d)
​.done(function(){ alert("Haha, réussi!"); })
​.fail(function(){ alert("Erreur!"); });
​d.resolve(); // Pour le moment, cette instruction n'est pas valide

Dans le code ci-dessus, la fonction wait() renvoie un objet de promesse. Ensuite, nous lions la fonction de rappel à cet objet au lieu de l'objet différé d'origine. L'avantage est que le statut d'exécution de cet objet ne peut pas être modifié. Si vous souhaitez modifier le statut d'exécution, vous ne pouvez utiliser que l'objet différé d'origine.

Cependant, une meilleure façon de l'écrire est, comme l'a souligné Allenm, de transformer l'objet dtd en objet interne de la fonction wait().

Copier le code Le code est le suivant :

var attendre = fonction (dtd){
　　var dtd = $.Deferred(); //Dans la fonction, créez un nouvel objet Deferred
　　var tâches = fonction(){
alert("Exécution terminée!");
　　 dtd.resolve(); // Changer l'état d'exécution de l'objet Différé
　　};
　　setTimeout(tâches,5000);
Return dtd.promise(); // Renvoie l'objet de promesse
};
​$.quand(attendre())
​.done(function(){ alert("Haha, réussi!"); })
​.fail(function(){ alert("Erreur!"); });

8. Interface de fonction de rappel pour les opérations courantes (au milieu)

Une autre façon d'empêcher que l'état d'exécution soit modifié de manière externe consiste à utiliser la fonction constructeur $.Deferred() de l'objet différé.

A ce moment, la fonction wait reste inchangée, on la passe directement dans $.Deferred() :

Copier le code Le code est le suivant :

​$.Différé(attendre)
​.done(function(){ alert("Haha, réussi!"); })
​.fail(function(){ alert("Erreur!"); });

jQuery stipule que $.Deferred() peut accepter un nom de fonction (attention, c'est un nom de fonction) comme paramètre, et l'objet différé généré par $.Deferred() sera utilisé comme paramètre par défaut de cette fonction .

9. Interface de fonction de rappel pour les opérations courantes (Partie 2)

En plus des deux méthodes ci-dessus, nous pouvons également déployer l'interface différée directement sur l'objet d'attente.

Copier le code Le code est le suivant :

var dtd = $.Deferred(); // Générer un objet différé
var attendre = function(dtd){
　　var tâches = fonction(){
alert("Exécution terminée!");
　　 dtd.resolve(); // Changer l'état d'exécution de l'objet Différé
　　};
　　setTimeout(tâches,5000);
};
​dtd.promise(attendre);
wait.done(function(){ alert("Haha, réussi !"); })
​.fail(function(){ alert("Erreur!"); });
attendre(dtd);

La clé ici est la ligne dtd.promise(wait), qui est utilisée pour déployer l'interface Deferred sur l'objet d'attente. C'est précisément grâce à cette ligne que done() et fail() peuvent être appelés directement en attente plus tard.

10.Résumé : Méthodes des objets différés

Nous avons déjà parlé des différentes méthodes d'objets différés. Voici un résumé :

　(1) $.Deferred() génère un objet différé.

　(2) deferred.done() spécifie la fonction de rappel lorsque l'opération réussit

(3) deferred.fail() spécifie la fonction de rappel lorsque l'opération échoue

　(4) Lorsque deferred.promise() n'a pas de paramètres, il renvoie un nouvel objet différé, et l'état d'exécution de l'objet ne peut pas être modifié lorsqu'il accepte des paramètres, il sert à déployer l'interface différée sur l'objet paramètre ; .

　(5) deferred.resolve() Change manuellement l'état d'exécution de l'objet différé en "Terminé", déclenchant ainsi immédiatement la méthode done().

　(6) deferred.reject() Cette méthode est exactement l'opposé de deferred.resolve() Après avoir été appelé, l'état d'exécution de l'objet différé sera changé en "failed", déclenchant ainsi la méthode fail(). immédiatement.

　 (7) $.when() spécifie les fonctions de rappel pour plusieurs opérations.

En plus de ces méthodes, l'objet différé possède également deux méthodes importantes, qui ne sont pas abordées dans le didacticiel ci-dessus.

　（8）deferred.then()

Parfois pour éviter des problèmes, done() et fail() peuvent être écrits ensemble. Il s'agit de la méthode then().

Copier le code Le code est le suivant :

​$.quand($.ajax( "/main.php" ))
​.then(successFunc, FailureFunc);

Si then() a deux paramètres, alors le premier paramètre est la fonction de rappel de la méthode done() et le deuxième paramètre est la méthode de rappel de la méthode fail(). Si then() n’a qu’un seul paramètre, cela équivaut à done().

(9) différé.always()

Cette méthode est également utilisée pour spécifier la fonction de rappel. Sa fonction est que peu importe si deferred.resolve() ou deferred.reject() est appelé, elle sera toujours exécutée à la fin.

Copier le code Le code est le suivant :

​$.ajax( "test.html" )
​.always( function() { alert("Executed!");} );