Rappels JavaScript
Je rappellerai 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 qu'une autre fonction a terminé.
Séquence de Fonction
Les fonctions JavaScript sont exécutées dans l'ordre où elles sont appelées, et non dans l'ordre où elles sont définies.
Cet exemple affichera "Bonjour", mais se terminera par "Au revoir" car les fonctions sont appelées dans cet ordre :
Exemple
function myFirst() {
myDisplayer("Bonjour");
}
function mySecond() {
myDisplayer("Au revoir");
}
myFirst();
mySecond();
Cet exemple affichera "Au revoir", mais se terminera par "Bonjour" car les fonctions sont appelées dans cet ordre :
Exemple
function myFirst() {
myDisplayer("Bonjour");
}
function mySecond() {
myDisplayer("Au revoir");
}
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 pourriez appeler une fonction de calculatrice ( myCalculator ), sauvegarder 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 pourriez 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 est que vous devez appeler deux fonctions pour afficher le résultat.
Le problème avec le deuxième exemple est que vous ne pouvez pas empêcher la fonction de calculatrice d'afficher le résultat.
Maintenant, il est temps d'introduire un rappel.
Rappels JavaScript
Un rappel est une fonction passée en argument à une autre fonction.
En utilisant un rappel, vous pourriez appeler la fonction de calculatrice ( myCalculator ) avec un rappel ( myCallback ), et laisser la fonction de calculatrice exécuter le rappel après que le calcul soit 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 appelée une fonction de rappel .
Elle est passée à myCalculator() en tant qu' argument .
Remarque
Lorsque vous passez une fonction en argument, n'oubliez pas de ne pas utiliser de parenthèses.
Correct : myCalculator(5, 5, myDisplayer);
Incorrect : myCalculator(5, 5, myDisplayer()) ;
Exemple
// Créer un tableau
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Appeler removeNeg avec un rappel
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Afficher le résultat
document.getElementById("demo").innerHTML = posNumbers;
// Garder uniquement les nombres positifs
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}
Dans l'exemple ci-dessus, (x) => x >= 0 est une fonction de rappel .
Elle est passée à removeNeg() en tant qu' argument .
Quand utiliser un rappel ?
Les exemples ci-dessus ne sont pas très passionnants.
Ils sont simplifiés pour vous enseigner la syntaxe des rappels.
Là où les rappels brillent vraiment, c'est dans les fonctions asynchrones, où une fonction doit attendre qu'une autre fonction (comme attendre qu'un fichier se charge).
Les fonctions asynchrones seront abordées dans le prochain chapitre.