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.
 
 

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>
Résultat

Cliquez sur le bouton, puis attendez 4 secondes et la page alertera "Hello".

 
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>
Résultat

Cliquez sur le bouton, puis attendez 4 secondes et la page alertera "Hello + name".

Les développeurs novices font parfois une erreur en ajoutant des parenthèses () après la fonction:

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

 
Cela ne fonctionne pas, car setTimeout attend une référence à une fonction.

 
 

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>
Résultat

Cliquez sur le bouton, puis attendez 4 secondes et la page alertera "Hello".

Cliquez sur le bouton "Arrêter" avant que les 4 secondes soient écoulées.

 

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>
Résultat

Cliquez sur les boutons, pour démarrer/arrêter le compteur.



 
QCM JavascriptQCM Javascript – Partie 1QCM sur Javascript avec des réponses pour la préparation des tests techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *