Méthodes setInterval() et setTimeout() en Javascript

Un code JavaScript est généralement exécuté de manière synchrone. Mais il existe certaines fonctions natives en JavaScript qui nous permettent de retarder l’exécution des instructions. Il y a setTimeout() et setInterval(), celles-ci vous permettent d’exécuter un morceau de code JavaScript à un moment donne. Dans ce tutoriel, nous allons découvrir le fonctionnement de ces deux méthodes et nous allons voir quelques exemples pratiques.
 
[wx_adsense]  

La méthode setTimeout()

setTimeout nous permet d’exécuter une fonction une fois lorsque l’intervalle est atteint. Il ne se répétera pas.
 
Exemple:
Ce code appelle la fonction sayHello après quatre seconde (4000 ms = 4 second):

<!DOCTYPE html>
<html>
   <body>
      <p>Cliquez sur le bouton, puis attendez 4 secondes et la page alertera "Hello".</p>
      <button onclick="setTimeout(sayHello, 4000);">Cliquez ici</button>
      <script>
         function sayHello() {
           alert('Hello');
         }
      </script>
   </body>
</html>

 
Avec des arguments:

<!DOCTYPE html>
<html>
   <body>
      <p>Cliquez sur le bouton, puis attendez 4 secondes et la page alertera "Hello + name".</p>
      <button onclick="setTimeout(sayHello, 4000, 'Alex');">Cliquez ici</button>
      <script>
         function sayHello(name) {
           alert( 'Hello ' + name );
         }
      </script>
   </body>
</html>

setTimeout(sayHello(), 4000);  //ERREUR

 
[wx_adsense]  

Comment arrêter l’exécution?

La méthode clearTimeout() arrête l’exécution de la fonction spécifiée dans setTimeout(). La méthode setTimeout() renvoie un identificateur « timerId » que nous pouvons utiliser pour annuler l’exécution.

<!DOCTYPE html>
<html>
   <body>
      <p>Cliquez sur le bouton, puis attendez 4 secondes et la page alertera "Hello".</p>
      <p>Cliquez sur le bouton "Arrêter" avant que les 4 secondes soient écoulées.</p>
      <button onclick="timerId = setTimeout(sayHello, 4000);">Cliquez ici</button>
      <button onclick="clearTimeout(timerId)">Arrêter</button>
      <script>
         function sayHello() {
           alert( 'Hello' );
         }
      </script>
   </body>
</html>

La méthode setInterval()

La méthode setInterval nous permet d’exécuter une fonction de manière répétée, en commençant après l’intervalle de temps, puis en répétant continuellement à cet intervalle, et pour arrêter l’exécution de la fonction, on utilise cette fois-ci la méthode clearInterval().
 
Exemple:
Le code suivant écrit sur l’élément DIV, en appelant la fonction compteur() dans la méthode setInterval:

<html>
   <body>
      <p>Cliquez sur les boutons, pour démarrer/arrêter le compteur.</p>
      <button onclick="timerId = setInterval('compteur()', 2000);">Cliquez ici</button>
      <button onclick="clearInterval(timerId)">Arrêter</button>
      <br><br>
      <div id="cpt"> </div>
      <script>
         var i = 0;
         function compteur(){
            i = i + 1;
            document.getElementById('cpt').innerHTML += i + "<br>";
         }
      </script>
   </body>
</html>