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é de la fonctions de minuterie ⏲️ setTimeout().

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 est possible d'écrire:

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

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

ou l'équivalent avec une fonction anonyme:

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

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 de pouvoir la manipuler après coup.

const timer = setTimeout(showMsg, 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.

let buyingTime = setTimeout(function() {
  window.location.href = "home.html";
}, 50000));

const confirm = document.querySelector('.btn-confirm');

confirm.addEventListener('click', function() {
  clearTimeout(buyingTime);
});