Rappels JavaScript
"Je vais rappeler plus tard!"
Un rappel est une fonction passée en argument à une autre fonction
Cette technique permet à une fonction d'appeler une autre fonction
Une fonction de rappel peut s'exécuter après la fin d'une autre fonction
Séquence de fonctions
Les fonctions JavaScript sont exécutées dans l'ordre où elles sont appelées. Pas dans l'ordre où ils sont définis.
Cet exemple finira par afficher "Au revoir":
Exemple
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
Cet exemple finira par afficher "Hello":
Exemple
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
Contrôle de séquence
Parfois, vous aimeriez avoir un meilleur contrôle sur le moment d'exécuter une fonction.
Supposons que vous souhaitiez effectuer un calcul, puis afficher le résultat.
Vous pouvez appeler une fonction de calculatrice ( myCalculator
), enregistrer le résultat, puis appeler une autre fonction ( myDisplayer
) pour afficher le résultat :
Exemple
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);
Ou, vous pouvez appeler une fonction de calculatrice ( myCalculator
) et laisser la fonction de calculatrice appeler la fonction d'affichage ( myDisplayer
) :
Exemple
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
Le problème avec le premier exemple ci-dessus, c'est que vous devez appeler deux fonctions pour afficher le résultat.
Le problème avec le deuxième exemple, c'est que vous ne pouvez pas empêcher la fonction calculatrice d'afficher le résultat.
Il est maintenant temps d'apporter un rappel.
Rappels JavaScript
Un rappel est une fonction passée en argument à une autre fonction.
À l'aide d'un rappel, vous pouvez appeler la fonction calculatrice ( myCalculator
) avec un rappel et laisser la fonction calculatrice exécuter le rappel une fois le calcul terminé :
Exemple
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
Dans l'exemple ci-dessus, myDisplayer
est le nom d'une fonction.
Il est passé à myCalculator()
comme argument.
Lorsque vous passez une fonction en argument, n'oubliez pas de ne pas utiliser de parenthèses.
A droite : maCalculatrice(5, 5, monAfficheur) ;
Tort:maCalculatrice(5, 5, monAfficheur());
Quand utiliser un rappel ?
Les exemples ci-dessus ne sont pas très excitants.
Ils sont simplifiés pour vous apprendre la syntaxe de rappel.
Là où les rappels brillent vraiment, ce sont dans les fonctions asynchrones, où une fonction doit attendre une autre fonction (comme attendre le chargement d'un fichier).
Les fonctions asynchrones sont traitées dans le chapitre suivant.