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">
&nbsp;&nbsp;</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;">&nbsp;&nbsp;
</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;">&nbsp;&nbsp;
</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:

  


Autres exemples d'animations

Voir aussi: