Événements de synchronisation JavaScript
|
1
2
3
4
5
6
sept
8
9
dix
11
12
|
JavaScript peut être exécuté dans des intervalles de temps. C'est ce qu'on appelle les événements de synchronisation. |
Calendrier des événements
L' windowobjet permet l'exécution de code à des intervalles de temps spécifiés.
Ces intervalles de temps sont appelés événements de synchronisation.
Les deux principales méthodes à utiliser avec JavaScript sont :
setTimeout(function, milliseconds)
Exécute une fonction, après avoir attendu un nombre spécifié de millisecondes.setInterval(function, milliseconds)
Identique à setTimeout(), mais répète l'exécution de la fonction en continu.
Le setTimeout()et setInterval()sont les deux méthodes de l'objet HTML DOM Window.
La méthode setTimeout()
window.setTimeout(function, milliseconds);
La window.setTimeout()méthode peut être écrite sans le préfixe de fenêtre.
Le premier paramètre est une fonction à exécuter.
Le deuxième paramètre indique le nombre de millisecondes avant l'exécution.
Exemple
Cliquez sur un bouton. Attendez 3 secondes, et la page alertera "Bonjour":
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
Comment arrêter l'exécution ?
La clearTimeout()méthode arrête l'exécution de la fonction spécifiée dans setTimeout().
window.clearTimeout(timeoutVariable)
La window.clearTimeout()méthode peut être écrite sans le préfixe de fenêtre.
La clearTimeout()méthode utilise la variable renvoyée par setTimeout():
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
Si la fonction n'a pas encore été exécutée, vous pouvez arrêter l'exécution en appelant la clearTimeout()
méthode :
Exemple
Même exemple que ci-dessus, mais avec un bouton "Stop" ajouté :
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
La méthode setInterval()
La setInterval()méthode répète une fonction donnée à chaque intervalle de temps donné.
window.setInterval(function, milliseconds);
La window.setInterval()méthode peut être écrite sans le préfixe de fenêtre.
Le premier paramètre est la fonction à exécuter.
Le deuxième paramètre indique la longueur de l'intervalle de temps entre chaque exécution.
Cet exemple exécute une fonction appelée "myTimer" une fois par seconde (comme une montre numérique).
Exemple
Afficher l'heure actuelle :
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
Il y a 1000 millisecondes dans une seconde.
Comment arrêter l'exécution ?
La clearInterval()méthode arrête les exécutions de la fonction spécifiée dans la méthode setInterval().
window.clearInterval(timerVariable)
La window.clearInterval()méthode peut être écrite sans le préfixe de fenêtre.
La clearInterval()méthode utilise la variable renvoyée par setInterval():
let myVar = setInterval(function, milliseconds);
clearInterval(myVar);
Exemple
Même exemple que ci-dessus, mais nous avons ajouté un bouton "Arrêter l'heure":
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
let myVar = setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>