Action répétée régulièrement

JavaScript fournit un système de minuterie qui permet de déclencher une action à intervalles réguliers.

Les fonctions setInterval et clearInterval

Ces deux fonctions permettent d'une part de définir une action qui va se répéter à intervalle régulier, et d'autre part de l'arrêter.

La fonction setInterval

Cette fonction permet de démarrer un processus de répétition d'une action à intervalles réguliers.

Sa syntaxe est :

setInterval(action,periode,[arguments]);

où

• action est une chaîne de caractères représentant une commande JavaScript ou le nom d'une fonction à exécuter.
• periode est un nombre représentant le nombre de millisecondes entre deux exécutions de la commande définie dans la chaîne action.
• arguments sont les éventuels arguments à passer en paramètres à la fonction définie par la chaîne action.

La fonction setInterval renvoie un identificateur qu'il est nécessaire de récupérer si on désire avoir la possibilité de stopper le processus de répétition.

La fonction clearInterval

Cette fonction permet d'arrêter un processus de répétition démarré avec la fonction setInterval.

Sa syntaxe est :

clearInterval(id);

où

• id est l'identificateur fourni lors de l'appel à setInterval.

Création d'un chronomètre

L'exemple suivant montre comment construire un chronomètre affichant les centièmes de secondes.

Le code HTML

Le code HTML ne contient qu'un formulaire contenant une ligne de saisie dans laquelle le chronomètre s'affichera et un bouton action pour démarrer ou arrêter.

Les fonctions JavaScript

Nous allons utiliser deux variables globales :

• chrono : l'identificateur renvoyé par setInterval; id sera égal à null lorsque le chronomètre n'est pas en marche.
• temps : un compteur pour les centièmes de seconde.

Ceci nous donne :

Nous allons ensuite écrire quatre fonctions :

• heure() : c'est la fonction qui affiche le chronomètre et qui est appelée tous les centièmes de seconde.
• commence() : c'est la fonction qui déclenche le chronomètre; elle ramène temps à 0, change l'intitulé du bouton action et utilise setInterval.
• stoppe() : c'est la fonction qui arrête le chronomètre; elle utilise clearInterval, remet chrono à null et change l'intitulé du bouton action.
• clique() : c'est la fonction appelée par le bouton action; elle appelle les fonctions commence et stoppe selon la valeur de chrono.

Ceci nous donne :