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().
Comparaison point par point
#Combien de fois elle appelle la fonction
- setTimeout()
- Une fois, après le délai
- setInterval()
- Plusieurs fois, à l’intervalle indiqué
Premier appel
- setTimeout()
- Après delay millisecondes
- setInterval()
- Aussi après delay, pas immédiatement
Comment arrêter
- setTimeout()
clearTimeout(id)avant l’appel- setInterval()
clearInterval(id), sinon elle tourne sans fin
Risque de fuite de mémoire
- setTimeout()
- Faible, elle s’appelle une seule fois
- setInterval()
- Fréquent, un intervalle oublié tourne indéfiniment
Quand un seul appel dure longtemps
- setTimeout()
- Sans importance, il n’y en a qu’un
- setInterval()
- Les appels peuvent se chevaucher logiquement
Usage typique
- setTimeout()
- Délai unique, debounce
- setInterval()
- Compte à rebours et répétition simple en arrière-plan
Exemple
#console.log('Start')
const timer = setInterval(() => console.log('Tic-tac'), 200)
setTimeout(() => {
clearInterval(timer)
console.log('Timeout après 500 ms, intervalle arrêté')
}, 500)Définition et utilisation
#Les deux fonctions planifient l’appel d’un callback après un nombre donné de millisecondes et ne bloquent pas le reste du code, qui continue immédiatement. Les deux renvoient un identifiant que vous transmettez à la fonction de nettoyage correspondante pour annuler l’appel planifié. Le délai indiqué n’est qu’un minimum, pas une garantie de précision.
setTimeout() appelle la fonction une seule fois et termine son action. setInterval() l’appelle plusieurs fois, au même intervalle, jusqu’à l’appel de clearInterval(), le premier appel ayant lieu lui aussi après le premier intervalle, pas immédiatement. Un intervalle oublié tourne indéfiniment, même quand personne n’a plus besoin de ses résultats, ce qui est une cause fréquente de fuites de mémoire. Quand un seul appel peut durer plus longtemps que l’intervalle, par exemple une requête au serveur, une chaîne auto-planifiée de setTimeout() est plus sûre.
Pour un délai unique et pour des mécanismes comme le debounce, utilisez setTimeout(). Pour une répétition simple et fixe, comme un compte à rebours, setInterval() suffit, mais pensez à clearInterval() quand il n’est plus nécessaire.
Syntaxe
#const timeoutId = setTimeout(callback, delay)
const intervalId = setInterval(callback, delay)Plus d’exemples
#let calls = 0
const id = setInterval(() => {
calls += 1
if (calls === 3) {
clearInterval(id)
console.log('Total des appels :', calls)
}
}, 150)function debounce(fn, ms) {
let timer
return (...args) => {
clearTimeout(timer)
timer = setTimeout(() => fn(...args), ms)
}
}
const saveDraft = debounce((text) => console.log('Brouillon enregistré :', text), 200)
saveDraft('H')
saveDraft('He')
saveDraft('Hello')Chaque appel de saveDraft() efface le minuteur précédent avec clearTimeout(). Seul le dernier brouillon est enregistré, 200 ms après le dernier appel.
Bonnes pratiques
#- Enregistrez toujours l’identifiant renvoyé par
setInterval()et appelezclearInterval()quand la répétition n’est plus nécessaire. - Quand un seul appel peut durer plus longtemps que l’intervalle, par exemple une requête au serveur, utilisez une chaîne de
setTimeout()plutôt quesetInterval(). - Pour le debounce (réaction après une pause dans la frappe), construisez sur
setTimeout(), pas sursetInterval().
Entrées associées
#- setTimeout()Exécute une fonction une seule fois, après le nombre de millisecondes indiqué.
- 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.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.