Apprendre JS : Timers

Les timers en JavaScript

Les timers en JavaScript sont des fonctions qui permettent de programmer l’exécution de code à des moments spécifiques. On parle aussi de fonctions de temporisation.

Elles permettent de :

• Retarder l’exécution d’une fonction avec setTimeout()
• Répéter l’exécution une fonction à intervalles réguliers avec setInterval()

Leur déclenchement programmé rend ces fonctions étroitement liées au concept d’asynchronicité en JavaScript. Ainsi, leur exécution est non bloquante, ce qui évite de figer l’interface utilisateur pendant l’exécution de tâches potentiellement longues.

Intervalle avec setInterval()

Rôle

Le rôle de la fonction setInterval() est d’exécuter une fonction à intervalles de temps réguliers jusqu’à ce qu’elle soit explicitement arrêtée.

Cela permet de créer des tâches répétitives dans une application, comme par exemple :

• Créer des animations avancées (diaporama…).
• Actualiser périodiquement des données à partir d’un serveur (notifications, messagerie, compteur de likes…).
• Implémenter des minuteries ou des compteurs.

Déclencher un intervalle

Voici la syntaxe de setInterval() :

setInterval(function, délai);

• function : La fonction à exécuter à chaque intervalle.
• délai : L’intervalle de temps (en millisecondes) entre chaque exécution de la fonction.

Exemple d’utilisation :

function hello() {
  console.log("Hello !");
}

setInterval(hello, 1000); // Affiche "Hello !" toutes les secondes

Arrêter un intervalle

La fonction setInterval() retourne un identifiant associé à l’intervalle, qu’il peut parfois être intéressant de stocker dans une variable. C’est notamment utile lorsque l’on souhaite arrêter un intervalle avec la fonction clearInterval().

const intervalID = setInterval(function() {
  // ...
}, 1000);

// Arrêt anticipé de l'intervalle
clearInterval(intervalID);

Pour arrêter un intervalle, on passe en argument à clearInterval() l’identifiant de l’intervalle (retourné par setInterval()).

Délai avec setTimeout()

Rôle

Le rôle de la fonction setTimeout() est de retarder l’exécution d’une fonction après un certain délai donné.

Cela permet de créer des décomptes ou des actions différées, comme par exemple :

• Afficher / masquer un élément HTML après un certain délai (abonnement à une newsletter, message d’alerte…).
• Implémenter des minuteries ou des compteurs.

Déclencher un délai

Voici la syntaxe de setTimeout() :

setTimeout(function, délai);

• function : La fonction à exécuter après le délai spécifié.
• délai : Le délai (en millisecondes) avant l’exécution de la fonction.

Exemple d’utilisation :

function hello() {
  console.log("Hello !");
}

setTimeout(hello, 2000); // Affiche "Hello !" après un délai de 2 secondes

Arrêter un délai

La fonction setTimeout() retourne un identifiant associé au délai, qu’il peut parfois être intéressant de stocker dans une variable. C’est notamment utile lorsque l’on souhaite arrêter un délai avec la fonction clearTimeout().

const timeoutID = setTimeout(function() {
  // ...
}, 1000);

// Arrêt anticipé du délai
clearTimeout(timeoutID);

Pour arrêter un délai, on passe en argument à clearTimeout() l’identifiant du délai (retourné par setTimeout()).