JavaScript Asynchrone
Je finirai plus tard !
Les fonctions qui s'exécutent en parallèle avec d'autres fonctions sont appelées asynchrones .
Un bon exemple est la fonction JavaScript setTimeout().
JavaScript Asynchrone
Les exemples utilisés dans le chapitre précédent étaient très simplifiés.
Le but de ces exemples était de démontrer la syntaxe des fonctions de rappel :
Exemple
function myDisplayer(something) {
document.getElementById("demo").innerHTML = something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
Dans l'exemple ci-dessus, myDisplayer est le nom d'une fonction.
Elle est passée à myCalculator() en tant qu'argument.
Dans le monde réel, les rappels sont le plus souvent utilisés avec des fonctions asynchrones.
Un exemple typique est la fonction JavaScript setTimeout() .
Attente d'un Timeout
Lors de l'utilisation de la fonction JavaScript setTimeout() , vous pouvez spécifier une fonction de rappel à exécuter lors du timeout :
Exemple
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "Je t'aime !!";
}
Dans l'exemple ci-dessus, myFunction est utilisé comme un rappel.
myFunction est passé à setTimeout() en tant qu'argument.
3000 est le nombre de millisecondes avant le timeout, donc myFunction() sera appelé après 3 secondes.
Remarque
Lorsque vous passez une fonction en tant qu'argument, n'oubliez pas de ne pas utiliser de parenthèses.
Correct : setTimeout(myFunction, 3000);
Incorrect : setTimeout(myFunction(), 3000) ;
Au lieu de passer le nom d'une fonction en tant qu'argument à une autre fonction, vous pouvez toujours passer une fonction entière à la place :
Exemple
setTimeout(function() { myFunction("Je t'aime !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Dans l'exemple ci-dessus, function(){ myFunction("Je t'aime !!!"); } est utilisé comme un rappel. C'est une fonction complète. La fonction complète est passée à setTimeout() en tant qu'argument.
3000 est le nombre de millisecondes avant le timeout, donc myFunction() sera appelé après 3 secondes.
Attente d'Intervalles :
Lors de l'utilisation de la fonction JavaScript setInterval() , vous pouvez spécifier une fonction de rappel à exécuter pour chaque intervalle :
Exemple
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
Dans l'exemple ci-dessus, myFunction est utilisé comme un rappel.
myFunction est passé à setInterval() en tant qu'argument.
1000 est le nombre de millisecondes entre les intervalles, donc myFunction() sera appelé chaque seconde.
Alternatives aux Rappels
Avec la programmation asynchrone, les programmes JavaScript peuvent commencer des tâches de longue durée et continuer à exécuter d'autres tâches en parallèle.
Cependant, les programmes asynchrones sont difficiles à écrire et à déboguer.
Pour cette raison, la plupart des méthodes JavaScript asynchrones modernes n'utilisent pas de rappels. Au lieu de cela, en JavaScript, la programmation asynchrone est résolue en utilisant des Promesses à la place.
Remarque
Vous apprendrez sur les promesses dans le prochain chapitre de ce tutoriel.