Section courante

A propos

Section administrative du site

Délai d'attente et minuterie

Vous êtes-vous déjà demandé s'il existait une méthode pour retarder votre code JavaScript de quelques secondes ? Dans cette page, nous expliquons ce qu'est la méthode setTimeout() avec des exemples de code et comment elle diffère de setInterval().

Qu'est-ce que setTimeout() du JavaScript ?

Le setTimeout() est une méthode exécutant un bloc de code après la fin de l'exécution du minuteur. Voici la syntaxe de la méthode setTimeout() :

let ID_depassement_delai = setTimeout(fonction, delai_en_millisecondes, parametre1, parametre2,...);

Voici la décomposons de la syntaxe :

Paramètre Description
fonction Ce paramètre permet de définir la fonction s'exécutant lorsque la minuterie s'est écoulée.
delai_en_millisecondes Ce paramètre permet d'indiquer le nombre de millisecondes que vous souhaitez que la fonction retarde. 1 000 millisecondes équivaut à 1 seconde.
parametre Ce paramètre permet d'indiquer les paramètres facultatifs associé à la méthode étant passés dans la fonction du paramètre fonction.
ID_depassement_delai Ce paramètre permet d'indiquer un entier positif correspondant à un identifiant unique pour la minuterie.

Dans cet exemple, le message apparaîtra à l'écran après un délai de 3 secondes. (3 000 millisecondes) :

  1. const parametre = document.getElementById("parametre");
  2.  
  3. function monMessage() {
  4.   parametre.innerHTML = "Il vient d'apparaître";
  5.   console.log("Le message apparaît");
  6. }
  7. setTimeout(monMessage, 3000);

Si le délai n'est pas présent dans la méthode setTimeout(), il est défini sur zéro et le message apparaîtra immédiatement :

  1. const parametre = document.getElementById("parametre");
  2.      
  3. function monMessage() {
  4.   parametre.innerHTML = "Il vient d'apparaître";
  5.   console.log("Le message apparaît");
  6. }
  7. setTimeout(monMessage);

clearTimeout()

Cette méthode est utilisée pour annuler un setTimeout(). Dans la méthode, vous devez référencer le ID_depassement_delai.

Voici la syntaxe de base :

clearTimeout(timeoutID)

Dans cet exemple, le message apparaîtra après un délai de 10 secondes (10 000 millisecondes). Mais si l'utilisateur clique sur le bouton Arrêt, alors le setTimeout() sera annulé :

  1. const timerMsg = document.getElementById("message");
  2. const stopBtn = document.getElementById("stop");
  3.  
  4. function timerMessage() {
  5.   timerMsg.innerHTML = "Merci d'attente !";
  6. }
  7.  
  8. let timeoutID = setTimeout(timerMessage, 10000);
  9.  
  10. stopBtn.addEventListener("click", () => {
  11.  clearTimeout(timeoutID);
  12.  timerMsg.innerHTML = "Minuterie arreter";
  13. });

En quoi setInterval() diffère-t-il de setTimeout() ?

Contrairement à setTimeout() n'exécutant une fonction qu'une seule fois après un certain délai, setInterval() répétera une fonction à chaque nombre de secondes défini. Si vous voulez arrêter setInterval(), vous utilisez clearInterval().

La syntaxe de setInterval() est la même que setTimeout() :

let intervalID=setInterval(fonction, delai_en_millisecondes, parametre1, parametre2,...);

En résumé

Le setTimeout() est une méthode exécutant un morceau de code après la fin de l'exécution du minuteur.

let ID_depassement_delai = setTimeout(fonction, delai_en_millisecondes, parametre1, parametre2,...);

Le délai est défini en millisecondes et 1 000 millisecondes équivaut à 1 seconde. Si le délai est omis de la méthode setTimeout(), le délai est défini sur 0 et la fonction s'exécute. Vous pouvez également avoir des arguments facultatifs étant passés dans la fonction. Le setTimeout() renverra le ID_depassement_delai étant un entier positif et un identifiant unique pour la minuterie. Il est important de ne pas utiliser de chaîne à la place de la fonction pour des raisons de sécurité.

  1. setTimeout("console.log('Ne faites pas cela');", 1000);

Si vous souhaitez annuler setTimeout(), vous devez utiliser clearTimeout().

  1. clearTimeout(ID_depassement_delai);

Si vous souhaitez exécuter à plusieurs reprises un morceau de code pendant un certain nombre de secondes, vous utiliserez setInterval().

  1. let intervalID = setInterval(() => {
  2.  // ce code s'exécute toutes les secondes
  3. }, 1000);     

Le setTimeout() peut être utilisé pour créer des animations JavaScript de base et des jeux en ligne.



Dernière mise à jour : Mercredi, le 1er février 2023