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 monPremier() {
monAffiche(“Bonjour”);
}
function maSeconde() {
monAffiche(“Au revoir”);
}
mon premier();
Mon deuxième();
Essayez-le vous-même »
Cet exemple finira par afficher “Hello”:
Exemple
function monPremier() {
monAffiche(“Bonjour”);
}
function maSeconde() {
monAffiche(“Au revoir”);
}
Mon deuxième();
mon premier();
Essayez-le vous-même »
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), enregistrez le résultat, puis appelez une autre fonction (myDisplayer) pour afficher le résultat :
Exemple
function monAfficheur(certains) {
document.getElementById(“démo”).innerHTML = certains ;
}
function maCalculatrice(num1, num2) {
soit somme = num1 + num2 ;
somme de retour ;
}
laisser résultat = maCalculatrice(5, 5);
monAfficheur(result);
Essayez-le vous-même »
Ou, vous pouvez appeler une fonction de calculatrice (myCalculator), et laissez la fonction calculatrice appeler la fonction d’affichage (myDisplayer):
Exemple
function monAfficheur(certains) {
document.getElementById(“démo”).innerHTML = certains ;
}
function maCalculatrice(num1, num2) {
soit somme = num1 + num2 ;
monAfficheur(somme);
}
maCalculatrice(5, 5);
Essayez-le vous-même »
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 de calculatrice (myCalculator) avec un rappel (myCallback), et laissez la fonction calculatrice exécuter le rappel une fois le calcul terminé :
Exemple
function monAfficheur(certains) {
document.getElementById(“démo”).innerHTML = certains ;
}
function maCalculatrice(num1, num2, myCallback) {
soit somme = num1 + num2 ;
monRappel(somme);
}
maCalculatrice(5, 5, monAfficheur);
Essayez-le vous-même »
Dans l’exemple ci-dessus, myDisplayer s’appelle un fonction de rappel.
Il est passé à myCalculator() en tant que argument.
Note
Lorsque vous passez une fonction en argument, n’oubliez pas de ne pas utiliser de parenthèses.
A droite : maCalculatrice(5, 5, monAfficheur) ;
Faux: maCalculatrice(5, 5, monAfficheur());
Exemple
// Créer un tableau
const mesNuméros = [4, 1, -20, -7, 5, 9, -6];
// Appelez removeNeg avec un callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Afficher le résultat
document.getElementById(“démo”).innerHTML = posNumbers ;
// Ne garde que les nombres positifs
function removeNeg(numbers, callback) {
const monTableau = [];
pour (const x de nombres) {
si (rappel(x)) {
monTableau.push(x);
}
}
retourne monTableau ;
}
Essayez-le vous-même »
Dans l’exemple ci-dessus, (x) => x >= 0 est un fonction de rappel.
Il est passé à removeNeg() en tant que argument.
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.
#Rappels #JavaScript
