"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()
Les exemples utilisés dans le chapitre précédent ont été très simplifiés.
Le but des exemples était de démontrer la syntaxe des fonctions de rappel :
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
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 le nom d'une fonction.
Il est passé à 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 JavaScript setTimeout()
.
Lors de l'utilisation de la fonction JavaScript setTimeout()
, vous pouvez spécifier une fonction de rappel à exécuter à l'expiration du délai :
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>setTimeout() with a Callback</h2>
<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
<h1 id="demo"></h1>
<script>
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
</script>
</body>
</html>
Dans l'exemple ci-dessus, myFunction
est utilisé comme rappel.
myFunction
est passé à setTimeout()
comme argument.
3000 est le nombre de millisecondes avant l'expiration du délai, donc myFunction()
sera appelé après 3 secondes.
Lorsque vous passez une fonction en argument, n'oubliez pas de ne pas utiliser de parenthèses.
À droite : setTimeout(myFunction, 3000);
Faux : setTimeout(myFunction(), 3000);
Au lieu de passer le nom d'une fonction en argument à une autre fonction, vous pouvez toujours passer une fonction entière à la place :
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>
<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
<h1 id="demo"></h1>
<script>
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
</script>
</body>
</html>
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 transmise à setTimeout() en tant qu'argument.
3000 est le nombre de millisecondes avant l'expiration du délai, donc myFunction()
sera appelé après 3 secondes.
Lors de l'utilisation de la fonction JavaScript setInterval()
, vous pouvez spécifier une fonction de rappel à exécuter pour chaque intervalle :
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>
<p>Using setInterval() to display the time every second (1000 milliseconds).</p>
<h1 id="demo"></h1>
<script>
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
</script>
</body>
</html>
Dans l'exemple ci-dessus, myFunction
est utilisé comme rappel.
myFunction
est passé à setInterval()
comme argument.
1000 est le nombre de millisecondes entre les intervalles, donc myFunction()
sera appelé toutes les secondes.
Avec la programmation asynchrone, les programmes JavaScript peuvent démarrer des tâches de longue durée, et continuez à exécuter d’autres tâches en parallèle.
Mais 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 à l'aide de Promesses.
Vous en apprendrez davantage sur les promesses dans le prochain chapitre de ce didacticiel.