Une brève analyse de l'application de la fonction de rappel JavaScript

1. Définition de la fonction de rappel

Une fonction de rappel est une fonction appelée via un pointeur de fonction. Si vous passez le pointeur (adresse) de la fonction comme un argument à une autre fonction, lorsque ce pointeur est utilisé pour appeler la fonction à laquelle il pointe, nous disons que c'est une fonction de rappel. La fonction de rappel n'est pas appelée directement par l'implémentateur de la fonction, mais est appelée par une autre partie lorsqu'un événement ou une condition spécifique se produit, et est utilisé pour répondre à l'événement ou à la condition.

Dans JavaScript, la définition spécifique de la fonction de rappel est: La fonction a est transmise en tant que paramètre (référence de fonction) dans une autre fonction B, et cette fonction B exécute la fonction A. Disons que la fonction a est appelée une fonction de rappel. S'il n'y a pas de nom (Fonction Expression), il est appelé une fonction de rappel anonyme. Par conséquent, le rappel n'est pas nécessairement utilisé pour l'asynchrone. Les rappels sont souvent utilisés dans les scénarios synchrones (blocs) généraux, tels que l'exécution de certaines opérations et la fonction de rappel est exécutée.

exemple

Un exemple d'utilisation des rappels en synchronisation (blocage) consiste à exécuter FUNC2 après l'exécution du code FUNC1.

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

2. Utilisez des occasions de la fonction de rappel

Chargement des ressources: exécutez un rappel après le chargement dynamique des fichiers JS, exécutez un rappel après le chargement de l'IFRAME, exécutez un rappel après le chargement de l'opération Ajax, exécutez un rappel après le chargement de l'image, AJAX, etc.

Les événements DOM et les événements Node.js sont basés sur le mécanisme de rappel (les rappels Node.js peuvent avoir des problèmes de nidification de rappel multi-couches).

Le temps de retard de Settimeout est 0. Ce hack est souvent utilisé. La fonction appelée par setTimeout est en fait un mode de réalisation

Appel de chaîne: lorsque l'appel de la chaîne, il est facile d'implémenter l'appel de chaîne dans la méthode de l'évaluateur (secteur) (ou dans les méthodes qui ne renvoient pas de valeurs), mais le Getter de valeur est relativement difficile à implémenter l'appel de chaîne, car vous avez besoin que le Getter de valeur renvoie les données dont vous avez besoin au lieu de ce pointeur. Si vous souhaitez implémenter la méthode de la chaîne, vous pouvez utiliser une fonction de rappel pour l'implémenter.

Les appels de fonction de setTimeout et setInterval obtiennent leur valeur de retour. Étant donné que les deux fonctions sont asynchrones, c'est-à-dire que leur synchronisation d'appels et le processus principal du programme sont relativement indépendants, il n'y a aucun moyen d'attendre leur valeur de retour dans le corps, et que le programme ne s'arrêtera pas et n'attendra pas lorsqu'ils seront ouverts, sinon la signification de Settimeout et SetInterval sera perdu. Par conséquent, il n'a pas de sens d'utiliser le retour, donc le rappel ne peut être utilisé que. La signification du rappel est de notifier la fonction proxy des résultats d'exécution du temporisateur pour un traitement en temps opportun.

3. Les fonctions sont également 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 étranges, mais ce sont en effet des objets. Pour être précis, une fonction est un objet de fonction créé avec le constructeur fonction (). L'objet de fonction contient une chaîne contenant le code JavaScript de la fonction. Si vous avez été transféré de C ou Java, cela peut sembler étrange, comment le code pourrait-il être une chaîne? Mais pour JavaScript, c'est assez courant. La différence entre les données et le code est vague.

 // La fonction peut être créée de cette manière var fn = nouvelle fonction ("arg1", "arg2", "return arg1 * arg2;"); fn (2, 3); // 6

Un avantage de cela est que vous pouvez transmettre du code à d'autres fonctions, ou vous pouvez transmettre des variables ou des objets réguliers (car le code est littéralement juste un objet).

Transférer la fonction comme rappel

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

 fonction fn (arg1, arg2, callback) {var num = math.ceil (math.random () * (arg1 - arg2) + arg2); callback (num); // transmet le résultat} fn (10, 20, fonction (num) {console.log ("callback appelé! num:" + num);}); // le résultat est un nombre aléatoire entre 10 et 20

Peut-être que cela semble lourd et même un peu stupide, pourquoi ne pas retourner le résultat anormalement? Mais lorsque vous devez utiliser une fonction de rappel, vous ne le pensez peut-être pas!

Ne vous gênez pas

Les fonctions traditionnelles entrent des données comme paramètres et utilisent des instructions de retour pour renvoyer les valeurs. En théorie, il y a une instruction de retour de retour à la fin de la fonction, qui est structurée: un point d'entrée et un point de sortie. C'est plus facile à comprendre. Les fonctions sont essentiellement cartographiées le processus d'implémentation entre l'entrée et la sortie.

Cependant, lorsque le processus d'implémentation de la fonction est très long, devriez-vous choisir d'attendre que la fonction termine le traitement ou utiliser la fonction de rappel pour effectuer un traitement asynchrone? Dans ce cas, l'utilisation de fonctions de rappel devient critique, telle que: demande ajax. Si vous utilisez une fonction de rappel pour le traitement, le code peut continuer à effectuer d'autres tâches sans la vider. Dans le développement réel, les appels asynchrones sont souvent utilisés en JavaScript, et il est même fortement recommandé ici!

Vous trouverez ci-dessous un exemple plus complet de chargement de fichiers XML à l'aide d'Ajax et à l'aide de la fonction Call () pour appeler la fonction de rappel dans le contexte de l'objet demandé.

 fonction fn (url, callback) {var httpRequest; // Créer xhr httprequest = window.xmlhttprequest? Nouveau xmlhttprequest (): window.activexObject? Nouveau ActiveXObject ("Microsoft.xmlHttp"): Undefined; // détection fonctionnelle pour IE httpRequest.OnreadyStateChange = function () {if (httprequest.readystate === 4 && httprequest.status === 200) {// Statut Jugement callback.call (httpRequest.Responsexml); }}; httprequest.open ("get", url); httpRequest.Send ();} fn ("text.xml", function () {// Appelez la fonction console.log (this); // sort après cette instruction}); console.log ("Cela s'exécutera avant le rappel ci-dessus."); // Cette instruction sort d'abord

Nos demandes de traitement asynchrones signifient que lorsque nous commençons à demander, nous leur disons d'appeler notre fonction une fois terminé. Dans les situations réelles, le gestionnaire d'événements OnReadyStateChange doit également considérer l'é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 attribuée à l'événement OnreadyStateChange et n'est donc pas exécutée immédiatement.

Enfin, l'instruction Console.log Console.log est en premier, car la fonction de rappel n'est pas exécutée jusqu'à la fin de la demande.

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

 fonction foo () {var a = 10; return function () {a * = 2; retourner a; }; } var f = foo (); f (); // retour 20.f (); // retour 40.

La fonction est appelée externe et peut toujours accéder à la variable a. Tout cela parce que la portée en JavaScript est lexicale. Les exécutions fonctionnelles dans la portée qui les définit (la portée à l'intérieur de Foo dans l'exemple ci-dessus), plutôt que dans la portée où cette 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 retournée peut accéder à la portée enregistrée. Le retour d'une fonction anonyme intégrée est la méthode la plus courante pour créer des fermetures.

Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.