Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

code:javascript:settimeout [07/06/2017 12:49]
elisabeth
code:javascript:settimeout [15/06/2018 22:20]
Ligne 1: Ligne 1:
-{{htmlmetatags>​metatag-robots=(index,​follow) metatag-author=(Elisabeth Pointal) metatag-keywords=(settimeout,​ javascript, asynchrone) metatag-description=(Utilisation de setTimeout pour processus longs réalisés de façon asynchrone. La fonction setTimeout est alors utilisée dans une fonction récursive pour appeler l'​étape suivante. )}} 
-====== 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. 
-<sxh js; first-line:​1;​ title: script.js; toolbar: on> 
-setTimeout( function(){ alert("​J'​ai attendu 300 millisecondes"​);​ }, 300); 
  
-// Le message ne sera affiché que dans 300 millisecondes 
-</​sxh>​ 
- 
-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: 
-<sxh js; first-line:​1;​ title: sans récursion; toolbar: on> 
-// 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();​ 
-</​sxh>​ 
- 
-Par la fonction récursive suivante: 
-<sxh js; first-line:​1;​ title: avec une fonction récursive; toolbar: on> 
-//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();​ 
-</​sxh>​ 
- 
-===== Exemple d'​utilisation ===== 
-On souhaite animer une barre de progression. 
-<​html>​ 
-<div> 
-<​progress max="​100"​ value="​25"​ ">​25%</​progress>​ 
-<input type="​button"​ value="​Jouer"​ class="​btn btn-primary"​ onClick="​progressbar.begin(0);"/>​ 
-</​div>​ 
-<script type="​text/​javascript">​ 
-  
-  var progressbar = { 
-     node : document.querySelector("​progress"​),​ 
-     step : 5, 
-     token : null, 
-     set : function( value ){ 
-          this.node.value =  value; 
-          this.node.textContent = value + " %"; 
-     }, 
-     play : function( value, token){ 
-         if( token != this.token){ 
-             ​return;​ 
-         } 
-         if( value <= 100 ){ 
-            this.set(value);​ 
-            var next = function(){ progressbar.play( value + progressbar.step,​ token);}; 
-            setTimeout( next, 100); 
-         } 
-     }, 
-     begin : function( value ){ 
-        var token = Math.random();​ 
-        this.token = token; 
-        this.play( 0, token); 
-     } 
-      
-  } 
-  ​ 
-  
-  progressbar.begin(0);​ 
-</​script>​ 
-</​html>​ 
-<sxh html; first-line:​1;​ title: la barre de progression;​ toolbar: on> 
-<div> 
-  <​progress max="​100"​ value="​25"​ ">​25%</​progress>​ 
-  <input type="​button"​ value="​Jouer"​ class="​btn btn-primary"​ onClick="​progressbar.begin(0);"/>​ 
-</​div>​ 
-</​sxh>​ 
- 
-<sxh js; first-line:​1;​ title: le code de la barre de progression;​ toolbar: on> 
-  
-  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);​ 
-</​sxh>​