7.3     JavaScript TimeOut

La méthode setTimeout()

La méthode setTimeout sert à exécuter une expression ou fonction après un intervalle de temps spécifié. Elle prend deux arguments :

• en premier et entre guillemets l'expression ou la fonction à appeler
• puis l'intervalle de temps en millisecondes après lequel la fonction doit être appelée

Cela revient à régler un chronomètre.

Sa syntaxe est setTimeout(nom,millisecondes).

Exemple 1

   <script type="text/javascript">
   function test(){
      setTimeout("message()",2000); 
   }
   function message(){
      alert("test de temps écoulé"); 
   }
   </script>
   <input type=button onClick="test()" value="test de temps écoulé">
   

Après avoir cliqué sur le bouton, la fonction test attend 2 secondes avant de déclencher la fonction message. La boîte de dialogue s'affichera après 2 secondes à partir de l'exécution.

Exemple 2

Actions répétées :

Pour exécuter et répéter une action après un laps de temps spécifié, on utilise setTimeout() dans la fonction qui exécute l'action.

    <script type="text/javascript">
    var x = 0;
    function test2(){
     x = x+1;
     alert(" la valeur de x est :  "+x); 
     setTimeout("test2()",3000); 
     }
   </script>
   <input type=button onClick="test2()" value="compteur">
    

Pour sortir de l'exécution de la fonction test2, il faut recharger la page.

En cliquant plusieurs fois sur le bouton compteur, le processus s'accélère. Voyons comment éviter cet inconvénient et stopper le processus.

La méthode clearTimeout()

Pour arrêter ou effacer une exécution créée avec setTimeout(), on utilise la méthode clearTimeout(). L'utilisation de la méthode demande l'utilisation de l'identifiant de setTimeout().

Reprenons l'exemple 2.

Exemple 3

    <script type="text/javascript">
    var x = 0;
    var timer;
    function test3(){
       x = x+1;
       alert(" la valeur de x est :  "+x); 
       timer = setTimeout("test3()",3000); 
    }
    function stop() {
       clearTimeout(timer);
    }
   </script>
   <input type=button onClick="test3();" value="start">
   <input type=button onClick="stop();" value="stop">
    

Si vous avez cliqué plusieurs fois sur le bouton start, vous devez cliquer le même nombre de fois sur le bouton stop pour arrêter l'affichage.

• index
• 
• 
• Aide
• 
•