OUJOOD.COM
Définition et utilisation de la méthode setInterval()
La méthode setInterval() appelle une fonction ou évalue une expression à des intervalles spécifiés (en millisecondes).
La méthode setInterval() continuera d'appeler la fonction jusqu'à ce que
clearInterval() soit appelée, ou que la fenêtre soit fermée.
La valeur de l'ID retournée par setInterval() est utilisée comme paramètre pour la méthode clearInterval().
Astuce : 1000 ms = 1 seconde.
Astuce : Pour exécuter une fonction une seule fois après un nombre spécifié de millisecondes, utilisez la méthode setTimeout().
Exemple : Afficher une boîte d'alerte toutes les 3 secondes (3 000 millisecondes)
Exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple méthode setInterval</title>
</head>
<body>
<p>Cliquez sur le bouton, attendez 3 secondes puis l'alerte « Bonjour » s'affiche.</p>
<p>Après avoir cliqué sur le bouton OK de la boîte d'alerte, une nouvelle boîte d'alerte s'affiche après 3 secondes, et ainsi de suite...</p>
<button type="button" onclick="maFonction()">Voir</button>
<button type="button" onclick="arreterAlertes()">Arrêter</button>
<script>
let intervalId;
function maFonction() {
// Éviter les intervalles multiples
if (intervalId) {
clearInterval(intervalId);
}
intervalId = setInterval(function() {
alert("Bonjour!");
}, 3000);
}
function arreterAlertes() {
if (intervalId) {
clearInterval(intervalId);
intervalId = null;
}
}
</script>
</body>
</html>
Support des navigateurs
La méthode setInterval() est prise en charge dans tous les principaux navigateurs.
Syntaxe
setInterval(fonction, millisecondes, param1, param2, ...)
Paramètres
| Paramètre | Description |
|---|---|
fonction |
Obligatoire. La fonction qui sera exécutée |
millisecondes |
Obligatoire. L'intervalle (en millisecondes) pour la fréquence d'exécution du code |
param1, param2, ... |
Optionnel. Paramètres supplémentaires à passer à la fonction |
Définition et utilisation de la méthode clearInterval()
La méthode clearInterval() arrête un minuteur défini avec la méthode
setInterval().
La valeur de l'ID retournée par setInterval()
est utilisée comme paramètre pour la méthode clearInterval().
Important : Pour pouvoir utiliser la méthode clearInterval(),
vous devez stocker l'ID retourné par setInterval()
dans une variable :
let intervalId = setInterval(maFonction, 1000);
Ensuite, vous pouvez arrêter l'exécution en appelant clearInterval(intervalId).
Exemple : Horloge numérique avec fonction d'arrêt
Afficher l'heure actuelle (la méthode setInterval() exécute la fonction une fois par seconde,
comme une montre digitale). clearInterval() permet d'arrêter le minuteur :
Exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horloge numérique</title>
</head>
<body>
<h1>Horloge locale</h1>
<p id="demo" aria-live="polite"></p>
<button type="button" onclick="demarrerHorloge()">Démarrer</button>
<button type="button" onclick="arreterHorloge()">Arrêter</button>
<script>
let intervalId = null;
// Démarrer l'horloge au chargement de la page
window.addEventListener('load', demarrerHorloge);
function demarrerHorloge() {
// Éviter les intervalles multiples
if (intervalId !== null) {
clearInterval(intervalId);
}
// Afficher l'heure immédiatement
afficherHeure();
// Puis mettre à jour chaque seconde
intervalId = setInterval(afficherHeure, 1000);
}
function afficherHeure() {
const maintenant = new Date();
const heureFormatee = maintenant.toLocaleTimeString('fr-FR');
document.getElementById("demo").textContent = heureFormatee;
}
function arreterHorloge() {
if (intervalId !== null) {
clearInterval(intervalId);
intervalId = null;
}
}
// Nettoyer l'intervalle lors de la fermeture de la page
window.addEventListener('beforeunload', arreterHorloge);
</script>
</body>
</html>
Support des navigateurs
La méthode clearInterval() est prise en charge dans tous les principaux navigateurs.
Syntaxe
clearInterval(intervalId)
Paramètres
| Paramètre | Description |
|---|---|
intervalId |
Obligatoire. L'ID du minuteur retourné par la méthode setInterval() |
Bonnes pratiques
- Toujours stocker l'ID retourné par
setInterval()pour pouvoir l'arrêter - Vérifier si un intervalle existe déjà avant d'en créer un nouveau
- Nettoyer les intervalles lors de la fermeture de la page ou du changement de vue
- Utiliser
letouconstau lieu devarpour les déclarations de variables - Préférer les fonctions nommées aux fonctions anonymes pour faciliter le débogage
- Considérer l'utilisation de
requestAnimationFrame()pour les animations visuelles - Éviter les intervalles trop courts qui peuvent surcharger le processeur
Conseils de performance
Attention : Les intervalles très courts (moins de 10ms) peuvent impacter les performances. Le navigateur limite généralement les intervalles à un minimum de 4ms.
Alternative : Pour les animations fluides, préférez requestAnimationFrame()
qui s'adapte au taux de rafraîchissement de l'écran.