Rappels JavaScript


Table des matières

    Afficher la table des matières

"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

Séquence de fonctions

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 » :

Exemple

 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" :

Exemple

 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>

Contrôle de séquence

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 :

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);

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) :

Exemple

 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.



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 de 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);

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.

Note

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()) ;

Exemple

// 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.


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, 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.