Dans ce didacticiel, vous découvrirez les fonctions de rappel JavaScript à l'aide d'exemples.
Une fonction est un bloc de code qui effectue une certaine tâche lorsqu'elle est appelée. Par exemple,
// function function greet(name) ( console.log('Hi' + ' ' + name); ) greet('Peter'); // Hi Peter
Dans le programme ci-dessus, une valeur de chaîne est transmise comme argument à la greet()fonction.
En JavaScript, vous pouvez également passer une fonction comme argument à une fonction. Cette fonction qui est passée en argument à l'intérieur d'une autre fonction est appelée une fonction de rappel. Par exemple,
// function function greet(name, callback) ( console.log('Hi' + ' ' + name); callback(); ) // callback function function callMe() ( console.log('I am callback function'); ) // passing function as an argument greet('Peter', callMe);
Production
Salut Peter, je suis la fonction de rappel
Dans le programme ci-dessus, il y a deux fonctions. Lors de l'appel de la greet()fonction, deux arguments (une valeur de chaîne et une fonction) sont passés.
La callMe()fonction est une fonction de rappel.
Bénéfice de la fonction de rappel
L'avantage d'utiliser une fonction de rappel est que vous pouvez attendre le résultat d'un appel de fonction précédent, puis exécuter un autre appel de fonction.
Dans cet exemple, nous allons utiliser la setTimeout()méthode pour imiter le programme qui prend du temps à s'exécuter, comme les données provenant du serveur.
Exemple: programme avec setTimeout ()
// program that shows the delay in execution function greet() ( console.log('Hello world'); ) function sayName(name) ( console.log('Hello' + ' ' + name); ) // calling the function setTimeout(greet, 2000); sayName('John');
Production
Bonjour John Bonjour tout le monde
Comme vous le savez, la méthode setTimeout () exécute un bloc de code après l'heure spécifiée.
Ici, la greet()fonction est appelée après 2000 millisecondes ( 2 secondes). Pendant cette attente, le sayName('John');est exécuté. C'est pourquoi Hello John est imprimé avant Hello world.
Le code ci-dessus est exécuté de manière asynchrone (la deuxième fonction; sayName()n'attend pas la première fonction; greet()pour terminer).
Exemple: utilisation d'une fonction de rappel
Dans l'exemple ci-dessus, la deuxième fonction n'attend pas que la première fonction soit terminée. Cependant, si vous souhaitez attendre le résultat de l'appel de fonction précédent avant que l'instruction suivante ne soit exécutée, vous pouvez utiliser une fonction de rappel. Par exemple,
// Callback Function Example function greet(name, myFunction) ( console.log('Hello world'); // callback function // executed only after the greet() is executed myFunction(name); ) // callback function function sayName(name) ( console.log('Hello' + ' ' + name); ) // calling the function after 2 seconds setTimeout(greet, 2000, 'John', sayName);
Production
Bonjour tout le monde Bonjour John
Dans le programme ci-dessus, le code est exécuté de manière synchrone. La sayName()fonction est passée comme argument à la greet()fonction.
La setTimeout()méthode exécute la greet()fonction seulement après 2 secondes. Cependant, la sayName()fonction attend l'exécution de la greet()fonction.
Remarque : la fonction de rappel est utile lorsque vous devez attendre un résultat qui prend du temps. Par exemple, les données provenant d'un serveur car il faut du temps pour que les données arrivent.
