setInterval()
Appelle une fonction de façon répétée, à l’intervalle donné, jusqu’à l’arrêt par clearInterval().
- Renvoie
- Un identifiant d’intervalle à utiliser avec
clearInterval().
Exemple
#let seconds = 3
const countdown = setInterval(() => {
console.log(seconds)
seconds -= 1
if (seconds === 0) {
clearInterval(countdown)
console.log('Début de la mission !')
}
}, 300)Définition et utilisation
#La fonction setInterval() exécute la fonction donnée à plusieurs reprises, chaque fois après le même intervalle en millisecondes. Le premier appel n’a lieu qu’après le premier intervalle, pas immédiatement.
Elle renvoie un identifiant que vous passez à clearInterval() pour arrêter la répétition. Sans cela, la fonction continue d’être appelée indéfiniment, même quand plus personne n’a besoin de ses résultats. Un intervalle oublié est une cause fréquente de fuites de mémoire et de bugs difficiles à trouver.
L’intervalle n’est pas parfaitement précis. Quand le navigateur est occupé ou que l’onglet s’exécute en arrière-plan, les appels peuvent être retardés. Pour les compteurs, calculez donc le temps écoulé à partir de Date.now(), et pour les animations, utilisez requestAnimationFrame().
Syntaxe
#const intervalId = setInterval(callback, delay)
setInterval(callback, delay, arg1, arg2, …)
clearInterval(intervalId)Paramètres
#callback
function
Fonction appelée toutes lesdelaymillisecondes.delay
nombre
L’intervalle entre les appels, en millisecondes.arg1…argN
optionnels
Arguments transmis à la fonction à chaque appel.
Plus d’exemples
#let progress = 0
const loader = setInterval(() => {
progress += 25
console.log(`Chargement : ${progress} %`)
if (progress >= 100) clearInterval(loader)
}, 200)let attempt = 1
function checkStatus() {
console.log(`Vérification du statut, tentative ${attempt}`)
attempt += 1
if (attempt <= 3) setTimeout(checkStatus, 200)
}
checkStatus()L’appel suivant n’est planifié qu’une fois le précédent terminé, donc les appels ne se chevauchent jamais. C’est un bon modèle pour interroger un serveur dont le temps de réponse peut varier.
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
#- Enregistrez toujours l’identifiant et appelez
clearInterval()quand la répétition n’est plus nécessaire, par exemple à la fin d’un compte à rebours ou en quittant la vue. - Si un seul appel peut durer plus longtemps que l’intervalle (par exemple une requête vers un serveur), utilisez un enchaînement de
setTimeout()pour que les appels ne se chevauchent pas. - Pour des animations fluides, utilisez
requestAnimationFrame(), passetInterval().
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().
- setTimeout()Exécute une fonction une seule fois, après le nombre de millisecondes indiqué.
- 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.
- DateUn objet représentant un instant précis, avec des méthodes pour lire et modifier la date et l’heure.
- () => {}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.