Dans ce didacticiel, vous découvrirez la méthode JavaScript setInterval () à l'aide d'exemples.
En JavaScript, un bloc de code peut être exécuté à des intervalles de temps spécifiés. Ces intervalles de temps sont appelés événements de chronométrage.
Il existe deux méthodes pour exécuter du code à des intervalles spécifiques. Elles sont:
- setInterval ()
- setTimeout ()
Dans ce didacticiel, vous découvrirez la setInterval()méthode.
JavaScript setInterval ()
La setInterval()méthode répète un bloc de code à chaque événement de synchronisation donné.
La syntaxe couramment utilisée de JavaScript setInterval est:
setInterval(function, milliseconds);
Ses paramètres sont:
- function - une fonction contenant un bloc de code
- millisecondes - l'intervalle de temps entre l'exécution de la fonction
La setInterval()méthode renvoie un intervalID qui est un entier positif.
Exemple 1: afficher un texte une fois toutes les 1 seconde
// program to display a text using setInterval method function greet() ( console.log('Hello world'); ) setInterval(greet, 1000);
Production
Bonjour le monde Bonjour le monde Bonjour le monde Bonjour le monde Bonjour le monde….
Dans le programme ci-dessus, la setInterval()méthode appelle la greet()fonction toutes les 1000 millisecondes ( 1 seconde).
Par conséquent, le programme affiche le texte Hello world une fois toutes les 1 seconde.
Remarque : la setInterval()méthode est utile lorsque vous souhaitez répéter plusieurs fois un bloc de code. Par exemple, afficher un message à un intervalle fixe.
Exemple 2: affichage de l'heure toutes les 5 secondes
// program to display time every 5 seconds function showTime() ( // return new date and time let dateTime= new Date(); // return the time let time = dateTime.toLocaleTimeString(); console.log(time) ) let display = setInterval(showTime, 5000);
Production
"17:15:28" "17:15:33" "17:15:38"….
Le programme ci-dessus affiche l'heure actuelle une fois toutes les 5 secondes.
new Date()donne la date et l'heure actuelles. Et toLocaleTimeString()renvoie l'heure actuelle. Pour en savoir plus sur la date et l'heure, visitez Date et heure JavaScript.
JavaScript clearInterval ()
Comme vous l'avez vu dans l'exemple ci-dessus, le programme exécute un bloc de code à chaque intervalle de temps spécifié. Si vous souhaitez arrêter cet appel de fonction, vous pouvez utiliser la clearInterval()méthode.
La syntaxe de la clearInterval()méthode est:
clearInterval(intervalID);
Ici, la intervalIDest la valeur de retour de la setInterval()méthode.
Exemple 3: Utilisez la méthode clearInterval ()
// program to stop the setInterval() method after five times let count = 0; // function creation let interval = setInterval(function()( // increasing the count by 1 count += 1; // when count equals to 5, stop the function if(count === 5)( clearInterval(interval); ) // display the current time let dateTime= new Date(); let time = dateTime.toLocaleTimeString(); console.log(time); ), 2000);
Production
16:47:41 16:47:43 16:47:45 16:47:47 16:47:49
Dans le programme ci-dessus, la setInterval()méthode est utilisée pour afficher l'heure actuelle toutes les 2 secondes. La clearInterval()méthode arrête l'appel de fonction après 5 fois.
Vous pouvez également transmettre des arguments supplémentaires à la setInterval()méthode. La syntaxe est:
setInterval(function, milliseconds, parameter1,… .paramenterN);
Lorsque vous passez des paramètres supplémentaires à la setInterval()méthode, ces paramètres ( parameter1, parameter2, etc.) seront transmis à la spécifiée fonction .
Par exemple,
// program to display a name function greet(name, lastName) ( console.log('Hello' + ' ' + name + ' ' + lastName); ) // passing argument to setInterval setInterval(greet, 1000, 'John', 'Doe');
Production
Bonjour John Doe Bonjour John Doe Bonjour John Doe….
Dans le programme ci-dessus, deux paramètres Johnet Doesont passés à la setInterval()méthode. Ces deux paramètres sont les arguments qui seront passés à la fonction (ici, la greet()fonction) qui est définie à l'intérieur de la setInterval()méthode.
Remarque: si vous n'avez besoin d'exécuter une fonction qu'une seule fois, il est préférable d'utiliser la méthode setTimeout ().
