Une fonction de rappel (en anglais callback function) est une fonction qui est passée en paramètre à une autre fonction. C'est cette autre fonction (appelée fonction d'ordre supérieur ou higher-order function) qui se chargera d'appeler la fonction de rappel.
Par exemple, le code suivant appelle la fonction de rappel afficherPopup() lorsque l'usager clique sur l'élément HTML avec l'identifiant mon-bouton.
let bouton = document.getElementById('mon-bouton');
if (bouton != null) {
bouton.addEventListener('click', afficherPopup);
}
Remarquez qu'il n'y a pas de parenthèses après le nom de la fonction de rappel puisqu'on ne veut pas l'exécuter immédiatement.
addEventListener() passe toujours un paramètre à la fonction de rappel : l'événement qui a déclenché l'action.
Mais puisqu'il n'y a pas de parenthèses, il n'est pas possible de passer directement d'autres paramètres à la fonction de rappel. Comment alors pouvons-nous spécifier le message à afficher avec notre fonction maison afficherPopup() ?
// fonction de rappel
function afficherPopup(message) {
...
}
La méthode bind() permet de régler ce problème.
Elle attend toujours au moins un paramètre : la valeur que prendra this à l'intérieur de la fonction de rappel. Ce peut être n'importe quel objet utile à la fonction. Si la fonction de rappel n'en a pas besoin, vous pouvez passer la valeur null.
Il est possible de passer à bind() autant de paramètres que désiré. Ces paramètres seront passés directement à la fonction de rappel.
function afficherPopup(message) {
console.log(message); // 'Voici la valeur passée en paramètre'
...
}
bouton.addEventListener('click', afficherPopup.bind(null, 'Voici la valeur passée en paramètre'));
Si la fonction de rappel a besoin de travailler avec l'événement que addEventListener() injecte automatiquement, il suffit de l'indiquer comme dernier paramètre.
function afficherPopup(message, event) {
console.log(message); // 'Voici la valeur passée en paramètre'
console.log(event.target); // <input type="button" id="mon-bouton" value="Cliquez ici!">
...
}
bouton.addEventListener('click', afficherPopup.bind(null, 'Voici la valeur passée en paramètre'));
La syntaxe avec fonctions fléchées permet elle aussi de passer des paramètres à une fonction de rappel.
Remarquez qu'ici, afficherPopup() est appelée avec des parenthèses, car c'est la fonction fléchée qui joue le rôle de fonction de rappel — c'est elle qui appellera afficherPopup() au bon moment.
// fonction de rappel
function afficherPopup(message) {
...
}
bouton.addEventListener('click', () => afficherPopup('Voici la valeur passée en paramètre'));
Si la fonction de rappel a besoin de l'événement, il suffit de le déclarer dans la fonction fléchée et de passer les paramètres dans l'ordre convenu lors de l'appel.
// fonction de rappel
function afficherPopup(event, message) {
...
}
bouton.addEventListener('click', (e) => afficherPopup(e, 'Voici la valeur passée en paramètre'));
La méthode bind() peut être utilisée dans d'autres contextes que addEventListener(), en autant qu'une fonction de rappel soit utilisée.
Voici un exemple où elle est utile.
// fonction qui fait appel à une fonction callback
function faireQuelqueChose(callback) {
// fait quelque chose
if (...) {
callback(); // exécute la fonction de rappel
}
}
// fonction de rappel (ici, pas de paramètre event, car ne sera pas injecté par addEventListener)
function fonctionAvecParametres(unParametre, unAutreParametre) {
// fait quelque chose
console.log(unParametre);
console.log(unAutreParametre);
}
// appel avec bind()
let callback = fonctionAvecParametres.bind(null, "A", "B");
faireQuelqueChose(callback);
// ou appel avec fonction fléchée
faireQuelqueChose(() => fonctionAvecParametres("A", "B"));
« Understand JavaScript Callback Functions and Use Them ». JavaScript is sexy. https://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/
▼Publicité
