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é:

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:

a=0;
setTimeout(function() {alert(a);},5000);
a=1;

affichera, au bout de 5s (=5000 ms), la valeur 1, et non pas 0. L'appel de la fonction est programmé 5s plus tard, puis la lecture exécution du code se poursuit. 5s après la fonction est exécuté, avec tout le contexte, valeurs des variables, définition des fonctions, … à ce moment là.

Méthode `clearTimeout`

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


<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>

Code javascript qui permet d'obtenir l'affichage/programme suivant :

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.


<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>

Pouir obtenir l'affichage clignotant:

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, et qui peut ensuite être utilisé dans clearTimeout.
On peut aussi générer une suite d'actions à exécuter, en indexant les setTimeout dans un vecteur:

<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() {
  % On arrête tous les setTimeout:
  for (i=0;i<11;i++) {clearTimeout(sT[i]);}
  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:

<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.

<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:

Gestion du temps et animation en javascript

Méthode setTimeout

Méthode clearTimeout

Méthode setInterval…

… et clearInterval

Start2 Stop2