Gestion du temps et animation en javascript

Méthode `setTimeout`

La méthode setTimeout() permet d'exécuter une fonction une seule fois après un intervalle de temps spécifié:

Code:Select all: setTimeout(function,delay);

exécute la fonction function après delay millisecondes (1000 ms = 1s…).

Remarque: L'appel de la fonction function est effectué après delay ms, en particulier avec la valeur à ce moment là des éventuelles variables utilisées dans la fonction.
Par exemple:

Code:Select all: a=0; setTimeout(function() {alert(a);},5000); a=1;

affichera, au bout de 5s (=5000 ms), la valeur 1, et non pas 0.

Méthode `clearTimeout`

Afin d'arrêter l'exécution de setTimeout, lorsque celle-ci a déjà été appelé et est donc en attente, on peut utiliser la méthode clearTimeout.

Code:Select all: <div> <div id="text_timeout"></div> <button onclick="function_timed_out();">Start'n wait 10s</button> <button onclick="stop_function_timed_out();">Oh no, stop this !</button> </div> <script> var sT=new Array; function function_timed_out() { cpt=10; sTg=setTimeout(function() { document.getElementById("text_timeout").innerHTML="TATA NaNa ...!! Les 10s sont écoulées"} ,(cpt+1)*1000); for (i=0;i<cpt;i++) { sT[i]=setTimeout(function() { document.getElementById("text_timeout").innerHTML="Attention, plus que "+cpt+"s";cpt--;} ,(cpt-i)*1000); } } function stop_function_timed_out() { clearTimeout(sTg); % arrêt du timer sTg for (i=0;i<15;i++) {clearTimeout(sT[i]);} % arrêt des autres timers document.getElementById("text_timeout").innerHTML="Ouf, arrêté à temps..."; } </script>

Affichage

Méthode `setInterval`…

La méthode setInterval() permet d'évaluer une expression ou d'appeler une fonction à intervalle de temps régulier

Appuyez sur Start !

… et `clearInterval`

Deux exemples d'animation: clignotement et compte à rebours

Effet de clignotement

En combinant setInterval et setTimeout on peut créer un effet de clignotement, ou d'affichage en alternance.

Code:Select all: <div id="blink" style="padding:2em 1.3em 2em 1.3em;border-radius:3em"> </div> <script> bl=document.getElementById("blink"); setInterval(function() { bl.innerHTML=" red "; bl.style.backgroundColor = "red"; setTimeout(function() { bl.innerHTML="green"; bl.style.backgroundColor="green"; },1000); },2000); </script>

Affichage:

Compte à rebours

Avec des `setTimeout` en boucle

t=setTimeout() retourne, dans t, un nombre représentant une ID d'identification de l'horloge lancée. C'est ce nombre qui est appelé dans clearTimeout.
On peut aussi générer une suite d'actions à exécuter, en indexant les setTimeout dans un vecteur:

Code:Select all: <br> <span id="countdown1" style="background-color:red;font-size:20pt; border-radius:2em;padding:.1em;padding-left:.4em;padding-right:.4em">   </span> <br> <button id="btn_countdown1" onclick="StartCountdown1();">Start countdown</button> <button onclick="StopCountdown1();">Stop countdown</button> <script> var sT=new Array; bl1=document.getElementById("countdown1"); % zone d'affichage cptk=10; % cptk est la valeur du compteur qui sera affichée function StartCountdown1() { k=10-cptk;t=0; while (k<10) {k++; sT[k]=setTimeout(function() { cptk--;bl1.innerHTML=cptk; if (cptk==0) {bl1.style.backgroundColor="green";} },t*1000);t++; } } function StopCountdown1() { for (i=0;i<11;i++) {clearTimeout(sT[i]);} % On arrête tous les setTimeout document.getElementById("btn_countdown1").innerHTML="Continue countdown"; } </script>

Affichage:

Avec un `setTimeout` dans une fonction récursive

Pour décompter (ou compter d'ailleurs), on attend 1s, on retranche 1, et on recommence.
Là réside justement le principe d'une fonction récursive, c'est-à-dire qui s'appelle elle-même.
En voilà un exemple d'implémentation:

Code:Select all: <span id="countdown2" style="background-color:red;font-size:20pt;border-radius:2em; padding:.1em;padding-left:.4em;padding-right:.4em;">   </span><br> <button id="btn_countdown2" onclick="Countdown2();"> Start countdown</button> <button onclick="StopCountdown2();">Stop countdown</button> <script> compteur=9; function Countdown2() { sT=setTimeout(function() { if (compteur>0) { document.getElementById("countdown2").innerHTML=compteur;compteur--; Countdown2(); } else { document.getElementById("countdown2").style.backgroundColor="green"; document.getElementById("countdown2").innerHTML=compteur; } },1000 ); } function StopCountdown2() { clearTimeout(sT); document.getElementById("btn_countdown2").innerHTML="Continue contdown"; } </script>

Affichage:

Avec `setInterval`

De même que précédemment, on répète en fait un certain nombre de fois une action (retrancher 1 et afficher le compteur).
setInterval sert justement à cela: on répète une fonction toutes les secondes, sachant que cette fonction contient elle-même sa fonction d'arrêt: clearInterval.

Code:Select all: <span id="countdown3" style="background-color:red;font-size:20pt;border-radius:2em; padding:.1em;padding-left:.4em;padding-right:.4em;">   </span> <br> <button id="btn_countdown3" onclick="StartCountdown3();"> Start countdown</button> <button onclick="StopCountdown3();">Stop countdown</button> <script> cpt=9; function StartCountdown3() { sI=setInterval(function() { if (cpt>0) { document.getElementById("countdown3").innerHTML=cpt;cpt--; } else { clearInterval(sI); document.getElementById("countdown3").innerHTML="0"; document.getElementById("countdown3").style.backgroundColor="green"; } },1000); } function StopCountdown3() { clearInterval(sI); document.getElementById("btn_countdown3").innerHTML="Continue countdown"; } </script>

Affichage:

Gestion du temps et animation en javascript

Méthode setTimeout

Méthode clearTimeout

Méthode setInterval…

… et clearInterval

Start2 Stop2