Découvrir les temporisateurs JavaScript

setTimeout()

Lors de l'écriture de code JavaScript, vous pourriez vouloir retarder l'exécution d'une fonction.

C'est le rôle de setTimeout. Vous spécifiez une fonction de rappel à exécuter plus tard, et une valeur exprimant à quel moment vous voulez qu'elle s'exécute, en millisecondes :

setTimeout(() => {
  // s'exécute après 2 secondes
}, 2000)
setTimeout(() => {
  // s'exécute après 50 millisecondes
}, 50)

Cette syntaxe définit une nouvelle fonction. Vous pouvez appeler n'importe quelle autre fonction que vous voulez, ou vous pouvez passer un nom de fonction existant, et un ensemble de paramètres :

const myFunction = (firstParam, secondParam) => {
  // faire quelque chose
}
// s'exécute après 2 secondes
setTimeout(myFunction, 2000, firstParam, secondParam)

setTimeout retourne l'ID du temporisateur. Ceci n'est généralement pas utilisé, mais vous pouvez stocker cet ID, et l'effacer si vous voulez supprimer cette exécution de fonction planifiée :

const id = setTimeout(() => {
  // devrait s'exécuter après 2 secondes
}, 2000)
// J'ai changé d'avis
clearTimeout(id)

Délai nul

Si vous spécifiez un délai d'attente de 0, la fonction de rappel sera exécutée dès que possible, mais après l'exécution de la fonction actuelle :

setTimeout(() => {
  console.log('après ')
}, 0)
console.log(' avant ')

Ce code affichera

avant
après

Ceci est particulièrement utile pour éviter de bloquer le processeur sur des tâches intensives et laisser d'autres fonctions s'exécuter lors d'un calcul lourd, en mettant les fonctions en file d'attente dans le planificateur.

TIP

Certains navigateurs (IE et Edge) implémentent une méthode setImmediate() qui fait exactement la même chose, mais ce n'est pas standard et indisponible sur d'autres navigateurs. Mais c'est une fonction standard dans Node.js.

setInterval()

setInterval est une fonction similaire à setTimeout, avec une différence : au lieu d'exécuter la fonction de rappel une seule fois, elle l'exécutera indéfiniment, à l'intervalle de temps spécifié (en millisecondes) :

setInterval(() => {
  // s'exécute toutes les 2 secondes
}, 2000)

La fonction ci-dessus s'exécute toutes les 2 secondes à moins que vous ne lui disiez de s'arrêter, en utilisant clearInterval, en lui passant l'ID d'intervalle que setInterval a retourné :

const id = setInterval(() => {
  // s'exécute toutes les 2 secondes
}, 2000)
// J'ai changé d'avis
clearInterval(id)

Il est courant d'appeler clearInterval à l'intérieur de la fonction de rappel setInterval, pour lui permettre de déterminer automatiquement si elle doit s'exécuter à nouveau ou s'arrêter. Par exemple, ce code exécute quelque chose à moins que App.somethingIWait n'ait la valeur arrivée :

setTimeout récursif

setInterval démarre une fonction toutes les n millisecondes, sans tenir compte du moment où une fonction a terminé son exécution.

Si une fonction prend toujours le même temps, tout va bien.

Peut-être que la fonction prend des temps d'exécution différents, en fonction des conditions du réseau.

Et peut-être qu'une longue exécution chevauche la suivante.

Pour éviter cela, vous pouvez planifier un setTimeout récursif à appeler lorsque la fonction de rappel se termine :

const myFunction = () => {
  // faire quelque chose
  setTimeout(myFunction, 1000)
}
setTimeout(myFunction, 1000)

setTimeout et setInterval sont disponibles dans Node.js, via le module Timers.

Node.js fournit également setImmediate(), qui équivaut à utiliser setTimeout(() => {}, 0), principalement utilisé pour travailler avec la boucle d'événements Node.js.