Explication détaillée de la fonction de rappel javascript_Connaissances de base

Définition de la fonction de rappel

La fonction de rappel est une fonction appelée via un pointeur de fonction. Si vous passez un pointeur de fonction (adresse) en paramètre à une autre fonction, et que ce pointeur est utilisé pour appeler la fonction vers laquelle il pointe, on dit qu'il s'agit d'une fonction de rappel. La fonction de rappel n'est pas appelée directement par l'implémenteur de la fonction, mais est appelée par une autre partie lorsqu'un événement ou une condition spécifique se produit pour répondre à l'événement ou à la condition.

En JavaScript, la définition spécifique d'une fonction de rappel est la suivante : la fonction A est passée en paramètre (référence de fonction) à une autre fonction B, et cette fonction B exécute la fonction A. Disons simplement que la fonction A est appelée fonction de rappel. S'il n'y a pas de nom (expression de fonction), on parle de fonction de rappel anonyme. Par conséquent, le rappel n'est pas nécessairement utilisé pour une utilisation asynchrone. Il est souvent utilisé dans des scénarios généraux synchrones (bloquants), par exemple pour exiger l'exécution d'une fonction de rappel après avoir effectué certaines opérations.

Exemple
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(){
>

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 avec l'imbrication des rappels multicouches).
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.

Les fonctions sont aussi des objets

Si vous souhaitez comprendre la fonction de rappel, vous devez d'abord comprendre clairement les règles de la fonction. En JavaScript, les fonctions sont bizarres, mais ce sont bien des objets. Pour être précis, une fonction est un objet Function créé à l’aide du constructeur Function(). L'objet Function contient une chaîne qui contient le code JavaScript de la fonction. Si vous venez de C ou Java, cela peut paraître étrange. Comment le code peut-il être une chaîne ? Mais avec javascript, c'est monnaie courante. La distinction entre données et code est floue.

Copier le code Le code est le suivant :

//Vous pouvez créer des fonctions comme celle-ci
var fn = new Function("arg1", "arg2", "return arg1 * arg2;");
fn(2, 3); //6

L'un des avantages de cette méthode est que vous pouvez transmettre du code à d'autres fonctions, ou vous pouvez transmettre des variables ou des objets normaux (car le code n'est littéralement qu'un objet).

Passer la fonction comme rappel

Il est facile de passer une fonction en paramètre.
​

Copier le code Le code est le suivant :

fonction fn(arg1, arg2, rappel){
var num = Math.ceil(Math.random() * (arg1 - arg2) arg2);
​ callback(num);//Transférer le résultat
>

fn(10, 20, fonction(num){
console.log("Rappel appelé ! Num : " num); });//Le résultat est un nombre aléatoire compris entre 10 et 20

Peut-être que cela semble fastidieux ou même un peu stupide. Pourquoi ne renvoyez-vous pas les résultats normalement ? Mais quand vous devez utiliser une fonction de rappel, vous ne le pensez peut-être pas !

Restez à l'écart

Les fonctions traditionnelles saisissent des données sous forme de paramètres et utilisent des instructions de retour pour renvoyer des valeurs. Théoriquement, il y a une instruction return à la fin de la fonction, qui est structurellement : un point d'entrée et un point de sortie. C'est plus facile à comprendre. Une fonction est essentiellement une cartographie du processus de mise en œuvre entre l'entrée et la sortie.

Cependant, lorsque le processus d'implémentation de la fonction est très long, choisissez-vous d'attendre la fin du traitement de la fonction, ou d'utiliser une fonction de rappel pour le traitement asynchrone ? Dans ce cas, il devient crucial d'utiliser des fonctions de rappel, par exemple : les requêtes AJAX. Si vous utilisez une fonction de rappel pour le traitement, le code peut continuer à effectuer d'autres tâches sans attendre en vain. Dans le développement réel, les appels asynchrones sont souvent utilisés en JavaScript, et c'est même fortement recommandé ici !

Vous trouverez ci-dessous un exemple plus complet d'utilisation d'AJAX pour charger un fichier XML et d'utilisation de la fonction call() pour appeler la fonction de rappel dans le contexte de l'objet demandé.
​

Copier le code Le code est le suivant :

fonction fn(url, rappel){
var httpRequest; //Créer XHR
httpRequest = window.XMLHttpRequest ? nouveau XMLHttpRequest() :　
　　 window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP"    ): non défini ;//Détection fonctionnelle pour IE
 
httpRequest.onreadystatechange = fonction(){
Si(httpRequest.readystate === 4
&& httprequest.status === 200) {// Jugement de statut
​​​​​ callback.call(httpRequest.responseXML);
>
};
httpRequest.open("GET", url);
httpRequest.send();
>

fn("text.xml", function(){　　 //Appeler la fonction
console.log(this); //Sortie après cette instruction
});

console.log("cela s'exécutera avant le rappel ci-dessus."); //Cette instruction est affichée en premier

Nos requêtes sont traitées de manière asynchrone, ce qui signifie que lorsque nous démarrons la requête, nous leur disons d'appeler notre fonction lorsqu'elles sont terminées. Dans les situations réelles, le gestionnaire d'événements onreadystatechange doit également prendre en compte la situation d'échec de la demande. Ici, nous supposons que le fichier XML existe et peut être chargé avec succès par le navigateur. Dans cet exemple, la fonction asynchrone est affectée à l'événement onreadystatechange et ne sera donc pas exécutée immédiatement.

Finalement, la deuxième instruction console.log est exécutée en premier car la fonction de rappel n'est exécutée que lorsque la requête est terminée.

L'exemple ci-dessus n'est pas facile à comprendre, alors jetez un œil à l'exemple suivant :

Copier le code Le code est le suivant :

fonction foo(){
var a = 10;
Fonction de retour(){
        a *= 2;
         renvoyer un ;                                    };  
>
var f = foo();
f(); //retourne 20.
f(); //retourne 40.

Lorsque la fonction est appelée en externe, la variable a reste accessible. Tout cela est dû au fait que la portée en JavaScript est lexicale. Les fonctions s'exécutent dans la portée dans laquelle elles sont définies (la portée à l'intérieur de foo dans l'exemple ci-dessus), et non dans la portée dans laquelle la fonction est exécutée. Tant que f est défini dans foo, il peut accéder à toutes les variables définies dans foo, même si l'exécution de foo est terminée. Parce que sa portée sera enregistrée, mais seule la fonction renvoyée pourra accéder à cette portée enregistrée. Renvoyer une fonction anonyme imbriquée est le moyen le plus courant de créer des fermetures.