JavaScript asynchrone
"Je finirai plus tard !"
Les fonctions exécutées en parallèle avec d'autres fonctions sont appelées asynchrones
Un bon exemple est JavaScript setTimeout()
JavaScript asynchrone
Les exemples utilisés dans le chapitre précédent, a été très simplifié.
Le but des 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, myDisplayerest le nom d'une fonction.
Il est passé à myCalculator()comme argument.
Dans le monde réel, les rappels sont le plus souvent utilisés avec des fonctions asynchrones.
Un exemple typique est JavaScript setTimeout().
Attente d'un délai d'attente
Lorsque vous utilisez la fonction JavaScript setTimeout(), vous pouvez spécifier une fonction de rappel à exécuter à l'expiration du délai :
Exemple
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
Dans l'exemple ci-dessus, myFunctionest utilisé comme rappel.
myFunctionest passé à setTimeout()comme argument.
3000 est le nombre de millisecondes avant l'expiration du délai, il
myFunction()sera donc appelé après 3 secondes.
Lorsque vous passez une fonction en argument, n'oubliez pas de ne pas utiliser de parenthèses.
A droite : setTimeout(myFunction, 3000);
Tort: setTimeout(maFonction(), 3000);
Au lieu de passer le nom d'une fonction comme argument à une autre fonction, vous pouvez toujours passer une fonction entière à la place :
Exemple
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Dans l'exemple ci-dessus, function(){ myFunction("I love You !!!"); }
est utilisé comme 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 l'expiration du délai, il
myFunction()sera donc appelé après 3 secondes.
Intervalles d'attente :
Lorsque vous utilisez 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, myFunctionest utilisé comme rappel.
myFunctionest passé à setInterval()comme argument.
1000 est le nombre de millisecondes entre les intervalles, il
myFunction()sera donc appelé toutes les secondes.
En attente de fichiers
Si vous créez une fonction pour charger une ressource externe (comme un script ou un fichier), vous ne pouvez pas utiliser le contenu avant qu'il ne soit complètement chargé.
C'est le moment idéal pour utiliser un rappel.
Cet exemple charge un fichier HTML ( mycar.html) et affiche le fichier HTML dans une page Web, une fois le fichier entièrement chargé :
En attente d'un fichier :
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function getFile(myCallback) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
myCallback(this.responseText);
} else {
myCallback("Error: " + req.status);
}
}
req.send();
}
getFile(myDisplayer);
Dans l'exemple ci-dessus, myDisplayerest utilisé comme rappel.
myDisplayerest passé à getFile()comme argument.
Ci-dessous une copie de mycar.html:
mavoiture.html
<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads,
to have seating for one to eight people, to typically have four wheels.</p>
<p>(Wikipedia)</p>