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.

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();

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