setTimeout()
Exécute une fonction une seule fois, après le nombre de millisecondes indiqué.
- Renvoie
- Un identifiant de minuteur que vous pouvez passer à
clearTimeout().
Exemple
#console.log('1. Début')
setTimeout(() => {
console.log('3. 500 ms se sont écoulées')
}, 500)
console.log('2. Le code n’attend pas le minuteur')Définition et utilisation
#La fonction setTimeout() planifie l’appel de la fonction donnée après un certain nombre de millisecondes. Elle ne met pas le programme en pause : le code écrit ensuite s’exécute immédiatement, et la fonction planifiée s’exécute plus tard, une fois le délai écoulé et le navigateur libre d’autre code.
Elle renvoie un identifiant de minuteur. En le passant à clearTimeout(), vous annulez un appel qui n’a pas encore eu lieu. C’est sur ce principe que repose, par exemple, une recherche lancée seulement une fois que l’utilisateur a arrêté de taper (ce qu’on appelle le debounce).
Le délai est un temps d’attente minimal, pas une garantie. Même setTimeout(fn, 0) attend que le code en cours se termine et que toutes les réactions de promesses en attente se soient exécutées. Dans les onglets qui s’exécutent en arrière-plan, le navigateur peut encore allonger les délais.
Syntaxe
#setTimeout(callback)
setTimeout(callback, delay)
setTimeout(callback, delay, arg1, arg2, …)
clearTimeout(timeoutId)Paramètres
#callback
function
Fonction à appeler une fois le délai écoulé.delay
nombre, optionnel
Le délai en millisecondes. Vaut 0 par défaut.arg1…argN
optionnels
Arguments transmis à la fonctioncallback.
Plus d’exemples
#const timer = setTimeout(() => console.log('Temps écoulé !'), 1000)
setTimeout(() => {
console.log('Réponse envoyée à temps')
clearTimeout(timer)
}, 300)setTimeout(() => console.log('3. setTimeout avec un délai de 0'), 0)
Promise.resolve().then(() => console.log('2. then() d’une promesse'))
console.log('1. Code synchrone')Les réactions de promesses vont dans la file des microtâches, qui est vidée avant le déclenchement du minuteur suivant, même avec un délai de 0.
function debounce(fn, ms) {
let timer
return (...args) => {
clearTimeout(timer)
timer = setTimeout(() => fn(...args), ms)
}
}
const search = debounce((text) => console.log('Recherche :', text), 300)
search('j')
search('ja')
search('jav')
search('java')Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Passez la fonction elle-même, pas son résultat :
setTimeout(showHint, 1000), et nonsetTimeout(showHint(), 1000). - Enregistrez l’identifiant du minuteur si vous pourriez vouloir l’annuler, par exemple quand l’utilisateur quitte la vue avant son déclenchement.
- Pour attendre dans une fonction
async, enveloppez le minuteur dans une promesse :const wait = (ms) => new Promise((r) => setTimeout(r, ms)).
Entrées associées
#- setTimeout() vs setInterval()setTimeout() appelle la fonction une seule fois après un délai donné ; setInterval() l’appelle de façon répétée jusqu’à ce que vous l’arrêtiez avec clearInterval().
- setInterval()Appelle une fonction de façon répétée, à l’intervalle donné, jusqu’à l’arrêt par clearInterval().
- PromiseUn objet qui représente le résultat d’une opération disponible plus tard : une valeur en cas de succès, ou une erreur.
- awaitMet en pause une fonction async jusqu’au règlement d’une promesse, puis renvoie sa valeur ou lève son erreur.
- () => {}Fonction fléchée (arrow function) : une syntaxe de fonction plus courte, sans this propre, avec un return implicite pour une seule expression.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.