Utilisation de setTimeout
- la fonction
setTimeout
permet de retarder l'éxecution d'une fonction. - elle ne s'exécute qu'une seule fois, contrairement à la fonction
setInterval
. - il faut utiliser la fonction
clearTimeout
pour stopper son déclenchement.
setTimeout( function(){ alert("J'ai attendu 300 millisecondes"); }, 300); // Le message ne sera affiché que dans 300 millisecondes
Elle est intéressante à utiliser pour les boucles ou processus long. Elle permet de faire des pauses et d'afficher les premiers résultats et de donner un aspect animé à l'exécution de processus. Elle est alors appelée dans une fonction récursive au moment du déclenchement de l'étape suivante. Cette étape est alors différée et laisse les autres processus s'exécuter.
le principe d'utilisation
Elle est utilisée dans une fonction récursive. Il est important de ne pas oublier la condition d'arrêt de la récursion.
On va remplacer les lignes suivantes:
// Boucle chronophage for(var i = 0; i < N ; i++){ qui_prend_du_temps(i); } //instruction à réaliser quand la boucle est terminée faire_quelque_chose(); //instruction qui ne demande pas que la boucle soit achevée faire_autre_chose();
Par la fonction récursive suivante:
//fonction récursive function partie_de_boucle( k, step){ if( k < N ){ for(var i = k ; i < k+step && i < N; i++){ qui_prend_du_temps(i); } // la fonction s'appelle pour l' index suivant k+ step, var suivant = function(){ partie_de_boucle( k+step , step);}; setTimeout( suivant , 0); }else{ // la boucle est terminée k >= N // instruction à réaliser quand la boucle est terminée faire_quelque_chose(); } } //Lance la boucle partie_de_boucle(0,step); //instruction qui ne demande pas que la boucle soit achevée, // elle débutera tout de suite bien que la boucle ne soit pas terminée faire_autre_chose();
Exemple d'utilisation
On souhaite animer une barre de progression.
<div> <progress max="100" value="25" ">25%</progress> <input type="button" value="Jouer" class="btn btn-primary" onClick="progressbar.begin(0);"/> </div>
var progressbar = { // le noeud html de la barre de progression node : document.querySelector("progress"), // le pas de progression step : 5, // un jeton pour différencier les différents processus token : null, // assigne la valeur value à la barre de progression set : function( value ){ this.node.value = value; this.node.textContent = value + " %"; }, // le fonction récursive qui joue la progression play : function( value, token){ if( token != this.token){ // si on a lancé un autre processus, on abandonne celui-ci return; } if( value <= 100 ){ this.set( value ); // on appelle le pas suivant avec le setTimeout var next = function(){ progressbar.play( value + progressbar.step , token);}; setTimeout( next, 100); } }, begin : function( value ){ // on démarre une progression, on crée un jeton pour différencier ce processus des autres var token = Math.random(); this.token = token; this.play( 0, token); } } // fin progressbar progressbar.begin(0);
— Elisabeth Pointal 22/06/2016 13:45