SetTimeout & SetInterval

3

Le code JavaScript s'exécute normalement dès qu'il lu par le navigateur. Cependant, il est parfois préférable de retarder son exécution, d'où l'utilité des fonctions de minuterie ⏲️ setTimeout() et setInterval().

setTimeout

La fonction setTimeout() est utilisée afin de déclencher une fonction à un moment précis spécifié en millisecondes.

La fonction prend deux paramètres:

  1. La fonction à exécuter.
  2. Le délai à respecter avant d'exécuter ladite fonction.

Par exemple, pour afficher ⏰ dans la console après 1 seconde, il serait possible d'écrire:

const afficherMsg = function() {
  console.log("⏰");
}

setTimeout(afficherMsg, 1000); // 1s = 1000ms

ou l'équivalent avec une fonction anonyme:

setTimeout(function() {
  console.log("⏰");
}, 1000); // 1s = 1000ms

Pour en savoir plus, voir cet article MDN🦖 à propos de setTimeout().

clearTimeout

La fonction setTimeout() retourne une référence d'elle-même. Il est donc possible de stocker cette référence dans une variable afin d'y faire référence plus tard.

const timer = setTimeout(afficherMsg, 1000);

Cette option est particulièrement utile afin d'annuler le déclenchement d'un setTimeout via clearTimeout().

clearTimeout(timer);

Par exemple, sur un site de billeterie un usager à un temps limite (5 mins) afin de remplir un formulaire confirmant l'achat de ses billets 🎟️ . Si le temps limite est dépassé, l'usager est retourné à la page de sélection de billets. Si l'usager soumet son formulaire dans les temps, l'action est annulée afin qu'il reste sur la page courante.

Un setTimeout() pourrait donc être utilisé afin de retourner l'usager sur la page de sélection de billets après un certain temps et si l'usager soumet son formulaire un clearTimeout() pourrait annuler cette action.

Pour en savoir plus, voir cet article MDN🦖 à propos de clearTimeout().

SetInterval

La fonction setInterval() ressemble à SetTimeout puisqu'elle appelle aussi une fonction après un certain laps de temps. Mais contrairement à celle-ci, plutôt que de l'appeler une seule fois, elle l'appelle à interval régulier.

La fonction prend deux paramètres:

  1. La fonction à exécuter.
  2. L'interval à respecter entre chaque exécution de ladite fonction.

Par exemple, pour afficher ⏱️ dans la console toutes les 5 secondes, il serait possible d'écrire:

const afficherMsg = function() {
  console.log("⏱️");
}

setInterval(afficherMsg, 5000); // 5s = 5000ms

ou l'équivalent avec une fonction anonyme:

setInterval(function() {
  console.log("⏱️");
}, 5000); // 5s = 5000ms

Pour en savoir plus, voir cet article MDN🦖 à propos de setInterval().

ClearInterval

La fonction setInterval() retourne une référence d'elle-même. Il est donc possible de stocker cette référence dans une variable afin d'y faire référence plus tard.

const timer = setInterval(afficherMsg, 5000);

Cette option est utile afin de mettre un terme aux répétitions déclenchées par un setInterval via clearInterval().

clearInterval(timer);

Chronomètre 🏃‍♂️ codepen.io/smnarnold/pen/bGejyWE

Pour en savoir plus, voir cet article MDN🦖 à propos de clearInterval().

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme