Chronomètre (Timing) JavaScript

La fonction de délai est celle qui nous permet d'exécuter une fonction à une heure spécifique.

En utilisant la fonction de délai, vous pouvez retarder l'exécution du code pour éviter de terminer le code à l'instant exact où l'événement est déclenché.

Il y a deux fonctions de chronométrage en JavaScript :

• setTimeout(function, milliseconds) -Exécute la fonction (function) après avoir attendu le nombre de millisecondes spécifié

• setInterval(function, milliseconds) -Sont identiques à setTimeout(), mais exécutent la fonction en continu (function)

ces deuxsetTimeout()etsetInterval()est une méthodeObjet window，peut être écrite sans préfixe window.

Méthode setTimeout()

setTimeout()La méthode est utilisée pour exécuter une fonction ou un segment de code spécifié après un certain temps.

Syntaxe :

window.setTimeout(function, milliseconds)

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

Le second paramètre indique le nombre de millisecondes avant l'exécution (1secondes = 1000 millisecondes).

Le suivant est un exemple qui s'exécute en cliquant sur le bouton2secondes après, un message d'alerte apparaîtra :

<button onclick="setTimeout(myFunc,　2000)">Cliquez</button>
<script>
function myFunc() {
　　alert("Hello World");
}
</script>

Arrêter l'exécution du code

clearTimeout()La méthode arrête l'exécution de la fonction spécifiée dans setTimeout().

Syntaxe :

window.clearTimeout(var)

clearTimeout()La méthode utilise la variable retournée par setTimeout().

　　t = setTimeout();
　　clearTimeout(t);

Si la fonction n'a pas encore été exécutée, elle peut être appelée viaclearTimeout()Cette méthode est utilisée pour arrêter l'exécution.

Les exemples ci-dessus sont identiques, mais ajoutent un bouton "Arrêter" :

<button onclick="myFunc()">Cliquez</button>
<button onclick="myStopFunc()">Arrêter l'alerte</button>
<script>
var t;
function myFunc() {
　　t = setTimeout(function() { alert("Hello world"); },　2000);
}
function myStopFunc() {
　　clearTimeout(t);
}
</script>

Méthode setInterval()

setInterval()La méthode appelle une fonction en répétant l'appel avec un délai fixe entre chaque appel.

Syntaxe :

window.setInterval(function, milliseconds)

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

Le second paramètre indique la longueur de l'intervalle de temps entre chaque exécution.

Dans cet exemple, la fonction appelée "startTimer" est exécutée une fois par seconde (comme un montre numérique) :

//Toutes les1
setInterval(startTimer,　1000);
function　startTimer()　{
　　var　date　=　new　Date();
　　document.getElementById("result").innerHTML　=　date.toLocaleTimeString();
}

Arrêter l'exécution du code

clearInterval()Arrête l'exécution de la fonction spécifiée dans setInterval().

Syntaxe :

window.clearInterval(var)

clearInterval()Utilisez la variable retournée par setInterval() pour la méthode.

　　t　=　setInterval();
　　clearInterval(t);

Les exemples ci-dessus sont identiques, mais ajoutent un bouton "Arrêter" :

//Toutes les1
var　t　=　setInterval(startTimer,　1000);
function　startTimer()　{
　　var　date　=　new　Date();
　　document.getElementById("result").innerHTML　=　date.toLocaleTimeString();
}
//Annuler l'utilisation de l'action répétée créée par setInterval()
function　stopTimer()　{
　　　clearInterval(t);
}

Plus d'exemples

Cliquez sur le bouton "Commencer le comptage" ci-dessous pour démarrer le chronomètre. Cliquez sur le bouton "Arrêter le comptage" pour arrêter le chronomètre :

Cliquez sur le bouton "Démarrer le progrès" ci-dessous pour démarrer la barre de progression. Cliquez sur le bouton "Arrêter le progrès" pour arrêter la barre de progression :