Table des matières
Fonctions setTimeout et setInterval dans ECMAScript
View more Tutorials:
-
Dans le ECMAScript, setTimeout(func, time) et setInterval(func,time) sont les deux fonctions assez similaires. Elles sont chronométrés afn d'accomplir un devoir. Dans cette leçon, je vais discuter de chacune fonction.
-
1- setTimeout() function
-
La fonction setTimeout(func, delay) établit un délai de millisecond 'delay', lorsque cette période de temps s'écoule, la fonction func sera appelée une seule fois.
-
Remarque : 1 seconde = 1000 mili secondes
-
La syntaxe :
-
setTimeout(func, delay)
-
- func: Cette fonction sera appelée après millisecondes 'delay'.
- delay: délai d'attente (en miliseconde)
-
Ci-dessous l'exemple simple de la fonction setTimeout(). Après 3 secondes, lorsque l'utilisateur clique sur "Show greeting", un message d'accueil s'affichera.
-
setTimeout-example.html
<!DOCTYPE html> <html> <head> <title>setTimeout function</title> <script type="text/javascript"> function greeting() { alert("Hello Everyone!"); } function startAction() { setTimeout(greeting, 3000); // 3 seconds. } </script> </head> <body> <h2>setTimeout Function</h2> <button onclick="startAction()">Show greeting</button> </body> </html>
-
-
-
Un autre exemple avec la fonction setTimeout(), vous pouvez exécuter cet exenoke dans l'environnement NodeJS :
-
setTimeout-example.js
console.log("3"); console.log("2"); console.log("1"); console.log("Call setTimeout!"); setTimeout( function() { console.log("Hello Everyone!"); }, 3000); // 3 seconds console.log("End!");
-
-
clearTimeout()
-
Supposons que vous appelez la fonction setTimeout() afin d'effecter une tâche, tant que la tâche n'est pas effectée, vous pouvez l'annuler en appelant la fonction clearTimeout().
-
-
clearTimeout-example.html
<!DOCTYPE html> <html> <head> <title>clearTimeout function</title> <script type="text/javascript"> var myTask = null; function greeting() { alert("Hello Everyone!"); myTask = null; } function startAction() { if(!myTask) { myTask = setTimeout(greeting, 3000); // 3 seconds. } } function cancelAction() { if(myTask) { clearTimeout(myTask); myTask = null; } } </script> </head> <body> <h2>setTimeout() & clearTimeout() Function</h2> <button onclick="startAction()">Show greeting</button> <button onclick="cancelAction()">Cancel</button> </body> </html>
-
-
2- La fonction setInterval()
-
La fonction setInterval(func, delay) définit un délai d'une milisecondes 'delay', après chaque miliseconde 'delay' la fonction func est appelée.
-
Syntaxe :
-
setInterval(func, delay)
-
- func: Cette fonction sera appelée après chaque délai de miliseconde 'delay'.
- delay: Délai d'attente (en miliseconde)
-
Ci-dessous un exemple simple avec la fonction setInterval(). Après 3 secondes que l'utilisateur clique sur le bouton "Show greeting" un message d'accueil sera affiché et il va afficher après chaque 3 secondes,..
-
-
setInterval-example.html
<!DOCTYPE html> <html> <head> <title>setInterval function</title> <script type="text/javascript"> function greeting() { alert("Hello Everyone!"); } function startAction() { setInterval(greeting, 3000); // 3 seconds. } </script> </head> <body> <h2>setInterval Function</h2> <button onclick="startAction()">Show greeting</button> </body> </html>
-
Un autre exemple avec la fonction setInterval(), vous pouvez exécuter cet exemple dans l’environnement NodeJS :
-
setInterval-example.js
console.log("3"); console.log("2"); console.log("1"); console.log("Call setInterval!"); setInterval( function() { console.log("Hello Everyone!"); }, 3000); // 3 seconds console.log("End!");
-
-
clearInterval()
-
Supposons que vous appelez la fonction setInterval() pour planifier l'exécution d'une tâche, vous pouvez annuler cette tâche en appelant la fonction clearInterval().
-
-
clearInterval-example.html
<!DOCTYPE html> <html> <head> <title>clearInterval function</title> <script type="text/javascript"> var myTask = null; function greeting() { alert("Hello Everyone!"); } function startAction() { if(!myTask) { myTask = setInterval(greeting, 3000); // 3 seconds. } } function cancelAction() { if(myTask) { clearInterval(myTask); myTask = null; } } </script> </head> <body> <h2>setInterval() & clearInterval() Function</h2> <button onclick="startAction()">Show greeting</button> <button onclick="cancelAction()">Cancel</button> </body> </html>
-