Quelles sont les fonctions de rappel dans JavaScript?

Si vous êtes programmeur, vous avez probablement entendu parler de fonctions, qui sont un ensemble d'instructions qui effectuent une action et renvoient une sortie mais quelles sont les fonctions de rappel?

La fonction de rappel est un concept extrêmement important de JavaScript et est largement utilisé dans les promesses, les auditeurs d'événements, les tableaux et bien plus encore.

Nous passerons en revue les fonctions de rappel et comment les utiliser en JavaScript dans ce tutoriel ainsi que nous parlerons également des fonctions de rappel synchrones et asynchrones. Pour avoir des concepts clairs et profonds des fonctions de rappel, nous implémenterons également quelques exemples.

Fonction de rappel

Une fonction de rappel est une fonction qui est d'abord adoptée comme argument à une autre fonction et doit être exécutée après les instructions écrites dans cette définition de fonction et comme le nom l'indique, il est exécuté plus tard dans la fonction. Pour le mettre en mots simples, une fonction de rappel est exécutée une fois l'effet actuel traité.

Syntaxe pour écrire une fonction de rappel dans JavaScript

La syntaxe de base est:

fonction namefunc (callbackfunc)
callbackfunc ();

C'est un fonction 'namefunc ()' qui prend un Fonction 'CallBackFunc ()' comme argument. Le Fonction 'CallBackFunc ()' est appelé de l'intérieur du fonction 'namefunc ()' C'est donc une fonction de rappel en effet.

Exemple 1

Supposons que nous voulons consoler.Enregistrer un message après 2 secondes.

message de fonction ()
console.Log ("Hello World après 2 secondes");

setTimeout (message, 2000);

Le fonction setTimeout () est une méthode intégrée de JavaScript qui prend une minuterie et une fonction de rappel comme un argument. Maintenant, la fonction de message (une fonction de rappel) ne sera appelée et sera exécutée que lorsque le minuteur expirera.

Dans le code ci-dessus, le message de fonction () est passé comme un argument et il est appelé après 2000 millisecondes (2 secondes). Maintenant, pour relier cela à la fonction de rappel, la fonction Message () a été appelée après 2 secondes. Il n'a pas été exécuté avant ces 2 secondes. C'est donc une fonction de rappel.

Besoin de fonctions de rappel?

Vous devez penser pourquoi avons-nous même besoin de fonctions de rappel. La réponse est simple. JavaScript est un langage séquentiel ou unique qui signifie qu'il s'exécute séquentiellement ligne par ligne.

JavaScript n'attend pas de réponse avant de passer à la ligne suivante. Il continuera d'exécuter et d'écouter d'autres événements ou lignes de code.

Par exemple:

Exemple2

Supposons que nous enregistrons 1 et 2 de deux fonctions différentes à la console:

fonction FirstMessage ()
console.log ("1");

fonction secondMessage ()
console.log ("2");

premier message();
SecondMessage ();

Sortir:

1
2

Comme prévu, la fonction premier message() est exécuté d'abord puis le fonction secondMessage () est exécuté.

Exemple3

Supposons que le Méthode FirstMessage () comprend une demande d'API pour récupérer les données d'un serveur. Nous devrons attendre la réponse / réponse du serveur, donc utilisons la méthode intégrée Settimeout une fois de plus.

Cette fois, nous retarderons la demande de 3 secondes pour voir comment nous pouvons demander une demande de récupération de l'API.

fonction FirstMessage ()
// Fonction de délai d'expiration pour retarder la demande
setTimeout (function ()
console.log ("1");
, 3000);

fonction secondMessage ()
console.log ("2");

premier message();
SecondMessage ();

Dans ce code, nous venons de déplacer la console.journal («1»); à l'intérieur de fonction setTimeout ().

Maintenant, ce qui est vraiment intéressant, c'est que lorsque vous exécutez ce code, vous verrez que le 2 sera affiché d'abord dans la console:

Après 3 secondes, le 1 sera montré:

Comme nous pouvons le voir, le Fonction FirstMessage () a été appelé d'abord puis le fonction secondMessage () a été appelé. Cependant, nous ne pouvons pas voir le résultat dans la séquence que nous avons appelée notre fonction.

Ce n'est pas que JavaScript n'a pas renvoyé notre code séquentiellement, c'est juste que JavaScript n'a pas attendu le Fonction FirstMessage () pour exécuter complètement et commencer à exécuter le fonction secondMessage ().

Cet exemple a été uniquement mis ici pour vous montrer pourquoi nous avons besoin de fonctions de rappel. Les fonctions de rappel nous assurons qu'un code ne s'exécutera pas tant que notre code requis n'aura pas été exécuté.

Types de fonctions de rappel

Maintenant que nous avons vu quels sont les rappels, comment ils sont utilisés et pourquoi ils sont importants, regardons les deux types de fonctions de rappel.

Fonction de rappel synchrone

Les fonctions de rappel synchrones sont exécutées / exécutées en même temps que la fonction d'ordre supérieur qui utilise la fonction de rappel et bloque principalement; Il termine sa tâche puis donne le contrôle à une autre fonction ou ligne de code.

Ceci est bénéfique car vous supposiez que vous récupérez des éléments d'une API. Vous voulez que votre page se charge une fois que vous avez récupéré certaines données d'une API. À moins que la réponse de l'API ne soit récupérée, tout le site doit attendre.

L'exemple 2 indiqué ci-dessus était des fonctions synchrones telles qu'elle exécutait ligne par ligne et une fois la première fonction exécutée seulement, le contrôle a été donné à la deuxième fonction i-e secondMessage () fonction.

Fonction de rappel asynchrone

Asynchrone est complètement opposé à synchrone car il fonctionne parallèle à l'appelant de la fonction et à la fonction de rappel. Fonctions asynchrones sont non bloqués car ils s'exécutent ou exécutent plus tard que la fonction d'ordre supérieur.

L'exemple 3 fourni ci-dessus était une fonction de rappel asynchrone comme nous avons appelé le Fonction FirstMessage () Mais il a attendu deux secondes. En ces deux secondes, il a rendu le contrôle et le fonction secondMessage () a été exécuté. Une fois les trois secondes en cours, le Fonction FirstMessage () a recommencé à exécuter.

Conclusion

UN fonction de rappel est une fonction qui est d'abord fournie comme un argument à une autre fonction et doit être exécutée après les instructions écrites dans cette définition de fonction. Nous avons appris quelles sont les fonctions de rappel et comment les utiliser dans JavaScript, ainsi que pourquoi les fonctions de rappel sont importantes et quels sont les deux types de fonctions de rappel dans ce post.