Callbacks JavaScript

"Je rappellerai plus tard !"

Un rappel (callback) est une fonction passée en tant que paramètre à une autre fonction

Cette technique permet à une fonction d'appeler une autre fonction

Les fonctions de rappel peuvent s'exécuter après la fin d'une autre fonction

Séquence de fonctions

Les fonctions JavaScript s'exécutent selon l'ordre de leur appel, pas selon l'ordre de leur définition.

En fin de compte, cet exemple affichera "Goodbye" :

exemple

function myFirst() {
  myDisplayer("Hello");
}
function mySecond() {
  myDisplayer("Goodbye");
}
myFirst();
mySecond();

Essayez-le vous-même

En fin de compte, cet exemple affichera "Hello" :

exemple

function myFirst() {
  myDisplayer("Hello");
}
function mySecond() {
  myDisplayer("Goodbye");
}
mySecond();
myFirst();

Essayez-le vous-même

Contrôle de l'ordre

Parfois, vous souhaitez mieux contrôler le moment où une fonction doit être exécutée.

Supposons que vous deviez effectuer un calcul puis afficher le résultat.

Vous pouvez appeler la fonction calculatrice (myCalculator) pour 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);

Essayez-le vous-même

Ou, vous pouvez appeler la fonction 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

Le problème du premier exemple est que vous devez appeler deux fonctions pour afficher le résultat.

Le problème du deuxième exemple est que vous ne pouvez pas empêcher la fonction calculatrice d'afficher le résultat.

Il est maintenant temps d'introduire le rappel.

Callbacks JavaScript

Un rappel est une fonction passée en tant que paramètre à une autre fonction.

Avec le rappel, vous pouvez appeler la fonction de calculatrice via le rappel (myCalculatoret exécutez la fonction de rappel de la fonction calculatrice après la fin du calcul :

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

Dans l'exemple ci-dessus, myDisplayer est le nom de la fonction.

Il est passé en tant que paramètre à myCalculator().

Lorsque vous transmettez une fonction en tant que paramètre, n'utilisez pas de parenthèses.

Correct : myCalculator(5, 5, myDisplayer);

Erreur : myCalculator(5, 5, myDisplayer());

Quand utiliser les rappels ?

L'exemple ci-dessus n'est pas très captivant.

Ils sont simplifiés afin de vous expliquer la syntaxe des rappels.

La véritable lumière des rappels est les fonctions asynchrones, où une fonction doit attendre une autre fonction (par exemple, attendre le chargement d'un fichier).

Le prochain chapitre présentera les fonctions asynchrones.