Comprendre les fonctions de rappel javascript_connaissances de base-js tutoriel-php.cn

Comprendre les fonctions de rappel javascript_connaissances de base

WBOY

Libérer： 2016-05-16 16:23:51

original

1000 Les gens l'ont consulté

Passez la fonction en paramètre dans une autre fonction. Cette fonction est ce qu'on appelle la fonction de rappel

Nous rencontrons souvent une situation où les couches A et B d'un projet sont complétées par des personnes différentes. La couche A est responsable de la fonction funA et la couche B est responsable de funcB. Lorsque la couche B souhaite utiliser les données d'un certain module, dit-il aux personnes de la couche A, j'ai besoin que vous fournissiez des données qui répondent à certains besoins, et vous me fournissez une interface.

Le personnel de niveau A a dit : Je vais vous fournir des données, et comment les afficher et les traiter est l'affaire de B.
Bien entendu, la couche B ne peut pas fournir une interface de données pour tous les besoins. B fournit une interface par laquelle A passe pour obtenir les données, puis B écrit une fonction pour les afficher.

C'est-à-dire que vous devez coopérer avec d'autres personnes, d'autres fournissent des données et vous n'avez pas besoin de prêter attention à la façon dont les autres obtiennent ou construisent des données. Il vous suffit d'opérer sur les données obtenues. A ce moment, vous devez utiliser la fonction de rappel

Par conséquent, les rappels sont essentiellement un modèle de conception, et les principes de conception de jQuery (y compris d'autres frameworks) suivent ce modèle.

Un exemple d'utilisation de rappels en synchronisation (blocage), le but est d'exécuter func2 une fois l'exécution du code func1 terminée.

Copier le code Le code est le suivant :

var func1=fonction(rappel){
//faire quelque chose.
(callback && typeof(callback) === "function") && callback();
>

func1(func2);
var func2=fonction(){
>

Exemple de rappel asynchrone :

Copier le code Le code est le suivant :

$(document).ready(callback);

$.ajax({
url : "test.html",
contexte : document.body
}).done(function() {
$(this).addClass("done");
}).fail(function() {
alert("erreur");
}).always(function() {
alert("terminé");
});

Notez que la requête ajax est bien asynchrone, mais cette requête est demandée par le navigateur pour ouvrir un nouveau thread Lorsque le statut de la requête change, si un rappel a été défini précédemment, le thread asynchrone générera un changement de statut. événement et placez-le en Attente de traitement dans la file d'attente de traitement du moteur JavaScript. Voir : http://www.phpv.net/html/1700.html

Quand le rappel sera-t-il exécuté ?

La fonction de rappel est généralement exécutée en dernier dans une situation synchrone, mais peut ne pas être exécutée dans une situation asynchrone car l'événement n'est pas déclenché ou les conditions ne sont pas remplies.

Occasions d'utilisation de la fonction de rappel

Chargement des ressources : exécuter le rappel après le chargement dynamique des fichiers js, exécuter le rappel après le chargement de l'iframe, le rappel de l'opération ajax, exécuter le rappel une fois le chargement de l'image terminé, AJAX, etc.
Les événements DOM et Node.js sont basés sur le mécanisme de rappel (les rappels Node.js peuvent avoir des problèmes d'imbrication de rappel multicouche).
Le temps de retard de setTimeout est de 0. Ce hack est souvent utilisé. La fonction appelée par settimeout est en fait l'incarnation d'un rappel
.

Appels chaînés : lorsqu'ils sont chaînés, il est facile d'implémenter des appels chaînés dans la méthode assignor (setter) (ou dans une méthode qui ne renvoie pas de valeur elle-même), mais le getter (getter) est relativement difficile à implémenter. appels chaînés, car vous avez besoin que l'évaluateur renvoie les données dont vous avez besoin au lieu de ce pointeur. Si vous souhaitez implémenter une méthode chaînée, vous pouvez utiliser une fonction de rappel pour l'implémenter
.

Les appels de fonction de setTimeout et setInterval obtiennent leurs valeurs de retour. Étant donné que les deux fonctions sont asynchrones, c'est-à-dire que leur séquence d'appel est relativement indépendante du processus principal du programme, il n'y a aucun moyen d'attendre leurs valeurs de retour dans le corps, et le programme ne s'arrêtera pas et n'attendra pas quand elles le seront. ouvert. Sinon, la signification de setTimeout et setInterval sera perdue, cela n'a donc aucun sens d'utiliser return et le rappel ne peut être utilisé. La signification du rappel est d'informer la fonction d'agent du résultat de l'exécution du minuteur pour un traitement en temps opportun.

Collectez des informations en ligne et vous devriez les comprendre. Je peux trier moi-même un exemple :

Copier le code Le code est le suivant :

fonction fun(num,callback){

Si(num<0) { 

alert("Appel de la fonction couche A pour le traitement!");

alert("Les données ne peuvent pas être négatives, erreur de saisie !");
}sinon if(num==0){

alert("Appel de la fonction couche A pour le traitement!");

alert("Cet élément de données n'existe pas !");

}autre{

alert("Appelez le traitement de la fonction de couche B!");

         rappel(1);

>

>

fonction test(){

var num=document.getElementById("score").value;

Fun(num,function(back){ //Fonction de traitement anonyme de la couche B

alert(":" retour);

Si(num<2) 

alert("Le nombre est 1");

          else if(num<=3) 

alert("Le nombre est 2 ou 3!");

        autre 

alert("Le nombre est supérieur à 3!"); 

})

>

Lorsque la fonction commence à exécuter fun, elle s'exécute d'abord pour déterminer si num est un nombre négatif ou zéro, sinon elle exécute la fonction de traitement de la couche B alert(":" back); <= 3, >3 et autres situations.

Conseils d'expérience :

Il est préférable de s'assurer que le rappel existe et doit être une référence de fonction ou une expression de fonction :

Copier le code Le code est le suivant :

(callback && typeof(callback) === "function") && callback();

Copier le code Le code est le suivant :

var obj={

init : fonction (rappel){

              //À FAIRE...

If(callback && typeof(callback) === "function") && callback()){

                callback('init...');//Callback

>

>

Enfin, pourquoi devrions-nous utiliser des fonctions de rappel ? La métaphore suivante est très vivante et intéressante.
Si vous avez quelque chose à faire, vous allez dans le dortoir d'à côté pour chercher vos camarades de classe et constatez qu'ils ne sont pas là. Que devez-vous faire ?

Méthode 1, allez au dortoir voisin toutes les quelques minutes pour voir s'il y a quelqu'un

Méthode 2, merci de demander aux personnes qui partagent le même dortoir avec lui de vous appeler lorsqu'elles le verront revenir

Le premier est un sondage et le second est un rappel.

Alors dis-moi, puis-je simplement attendre dans le prochain dortoir jusqu'à ce que mes camarades de classe reviennent ?

Oui, c'est juste que vous auriez pu gagner du temps pour faire autre chose, mais maintenant vous devez le perdre à attendre. Transformez l'appel asynchrone non bloquant d'origine en un appel synchrone bloquant.

Les rappels JavaScript sont utilisés dans des scénarios d'appels asynchrones, et les performances de l'utilisation des rappels sont meilleures que celles de l'interrogation.