Événements de temps JavaScript

JavaScript peut s'exécuter à des intervalles de temps.

C'est ce qu'on appelle des événements temporels (Timing Events).

Événements de tempsage

L'objet window permet d'exécuter du code à des intervalles de temps spécifiés.

Ces intervalles de temps s'appellent des événements de temps.

Deux méthodes clés sont utilisées par JavaScript :

setTimeout(function, millisecondes)
exécute la fonction après avoir attendu le nombre de millisecondes spécifié.
setInterval(function, millisecondes)
équivaut à setTimeout(), mais exécute la fonction en boucle.

setTimeout() et Méthode setInterval() appartiennent tous aux méthodes de l'objet HTML DOM Window.

Méthode setTimeout()

window.setTimeout(function, millisecondes);

window.setTimeout() La méthode peut être sans window préfixe pour écrire.

Le premier paramètre est la fonction à exécuter.

Le deuxième paramètre indique le nombre de millisecondes avant l'exécution.

Exemple

Cliquez sur le bouton. Attendez 3 secondes, puis une fenêtre de dialogue "Hello" apparaîtra :

<button onclick="setTimeout(myFunction, 3000)">Essayer</button>
<script>
function myFunction() {
    alert('Hello');
 }
</script>

Essayez-le vous-même

Comment arrêter l'exécution ?

clearTimeout() l'exécution de la méthode est arrêtée setTimeout() la fonction définie dans les règles.

window.clearTimeout(timeoutVariable)

window.clearTimeout() La méthode peut être sans window préfixe pour écrire.

clearTimeout() en utilisant setTimeout() Variable retournée :

myVar = setTimeout(function, millisecondes);
clearTimeout(myVar);

Exemple

Comme dans l'exemple précédent, mais avec un bouton "Arrêter" :

<button onclick="myVar = setTimeout(myFunction, 3000)">Essayer</button>
<button onclick="clearTimeout(myVar)">Arrêter l'exécution</button>

Essayez-le vous-même

Méthode setInterval()

Méthode setInterval() La méthode répète la fonction donnée à des intervalles de temps donnés.

window.setInterval(function, millisecondes);

window.setInterval() La méthode peut être sans window préfixe pour écrire.

Le premier paramètre est la fonction à exécuter.

Le deuxième paramètre est la longueur de l'intervalle entre chaque exécution.

Dans cet exemple, la fonction "myTimer" est exécutée une fois par seconde (comme un chronomètre numérique).

Exemple

Afficher l'heure actuelle :

var myVar = setInterval(myTimer, 1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

Essayez-le vous-même

Un second compte 1000 millisecondes.

Comment arrêter l'exécution ?

Méthode clearInterval() arrêt de la méthode Méthode setInterval() l'exécution de la fonction spécifiée dans la méthode.

window.clearInterval(timerVariable)

window.clearInterval() Peut être écrite sans préfixe window.

Méthode clearInterval() La méthode setInterval() utilise Méthode setInterval() Variable retournée :

myVar = setInterval(function, millisecondes);
clearInterval(myVar);

Exemple

Comme dans l'exemple précédent, mais nous avons ajouté un bouton "Arrêter le temps":

<p id="demo"></p>
<button onclick="clearInterval(myVar)">Arrêter le temps</button>
<script>
var myVar = setInterval(myTimer, 1000);
 function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

Essayez-le vous-même

Plus d'exemples

Un autre chronomètre simple
Horloge créée par un compteur