"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 la fin d'une autre fonction
Les fonctions JavaScript sont exécutées dans l'ordre dans lequel elles sont appelées. Pas dans l'ordre dans lequel ils sont définis.
Cet exemple finira par afficher « Au revoir » :
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
</script>
</body>
</html>
Cet exemple finira par afficher "Bonjour" :
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
</script>
</body>
</html>
Parfois, vous aimeriez avoir un meilleur contrôle sur le moment où 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 appelez une autre fonction (myDisplayer
) pour afficher le résultat :
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);
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
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);
</script>
</body>
</html>
Ou bien, vous pouvez appeler une fonction de calculatrice (myCalculator
), et laissez la fonction calculatrice appeler la fonction d'affichage (myDisplayer
) :
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
</script>
</body>
</html>
Le problème avec le premier exemple ci-dessus, c'est qu'il faut 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 calculatrice de afficher le résultat.
Il est maintenant temps de procéder à un rappel.
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 de calculatrice exécuter le rappel une fois le calcul terminé :
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(something) {
document.getElementById("demo").innerHTML = something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
</script>
</body>
</html>
Dans l'exemple ci-dessus, myDisplayer
est appelé une fonction de rappel.
Il est passé à myCalculator()
comme argument.
Lorsque vous passez une fonction en argument, n'oubliez pas de ne pas utiliser de parenthèses.
À droite : maCalculatrice(5, 5, monAfficheur) ;
Faux : myCalculator(5, 5, myDisplayer()) ;
// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Call removeNeg with a callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Display Result
document.getElementById("demo").innerHTML = posNumbers;
// Keep only positive numbers
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body style="text-align: right">
<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>
<p id="demo"></p>
<script>
// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Call removeNeg with a Callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Display Result
document.getElementById("demo").innerHTML = posNumbers;
// Remove negative numbers
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}
</script>
</body>
</html>
Dans l'exemple ci-dessus, (x) => x >= 0
est une fonction de rappel.
Il est passé à removeNeg()
comme argument.
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, c'est dans les fonctions asynchrones, où une fonction doit attendre une autre fonction (comme attendre le chargement d'un fichier).
Les fonctions asynchrones sont couvertes dans le chapitre suivant.