Événements de synchronisation JavaScript


Table des matières

    Afficher la table des matières


JavaScript peut être exécuté à intervalles de temps.

C'est ce qu'on appelle les événements de chronométrage.

1
2
3
4
5
6
7
8
9
10
11
12

Événements de chronométrage

L'objet window 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 méthodes clés à 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 permanence.

setTimeout() et setInterval() sont deux méthodes de l'objet HTML DOM Window.


La méthode setTimeout()

window.setTimeout(function, milliseconds);

La méthode window.setTimeout() peut être écrite sans le préfixe window.

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>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>Click "Try it". Wait 3 seconds, and the page will alert "Hello".</p>

<button onclick="setTimeout(myFunction, 3000);">Try it</button>

<script>
function myFunction() {
  alert('Hello');
}
</script>

</body>
</html>


Comment arrêter l’exécution ?

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

window.clearTimeout(timeoutVariable)

La méthode window.clearTimeout() peut être écrite sans le préfixe window.

La méthode clearTimeout() utilise la variable renvoyé par setTimeout() :

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

Si la fonction n'a pas déjà été exécutée, vous pouvez arrêter l'exécution en appelant 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>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>Click "Try it". Wait 3 seconds. The page will alert "Hello".</p>
<p>Click "Stop" to prevent the first function to execute.</p>
<p>(You must click "Stop" before the 3 seconds are up.)</p>

<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>

<button onclick="clearTimeout(myVar)">Stop it</button>

<script>
function myFunction() {
  alert("Hello");
}
</script>
</body>
</html>

La méthode setInterval()

La méthode setInterval() répète une fonction donnée à chaque intervalle de temps.

window.setInterval(function, milliseconds);

La méthode window.setInterval() peut être écrite sans le préfixe window.

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

Le deuxième paramètre indique la durée de l'intervalle de temps entre chaque exécution.

Cet exemple exécute une fonction appelée "myTimer" une fois par seconde (comme un montre).

Exemple

Afficher l'heure actuelle :

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<script>
setInterval(myTimer, 1000);

function myTimer() {
  const d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

</body>
</html>

Il y a 1000 millisecondes dans une seconde.


Comment arrêter l’exécution ?

La méthode clearInterval() arrête les exécutions de la fonction spécifié dans la méthode setInterval().

window.clearInterval(timerVariable)

La méthode window.clearInterval() peut être écrite sans le préfixe window.

La méthode clearInterval() 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 « Stop time » :

<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>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Timing</h2>

<p>A script on this page starts this clock:</p>

<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>

</body>
</html>

Plus d'exemples

Un autre timing simple

<!DOCTYPE html>
<html>
<body>

<h2>JavaSript setTimeout()</h2>

<p id="demo">I will display when two, four, and six seconds have passed.</p>

<script>
setTimeout(myTimeout1, 2000) 
setTimeout(myTimeout2, 4000) 
setTimeout(myTimeout3, 6000) 

function myTimeout1() {
  document.getElementById("demo").innerHTML = "2 seconds";
}
function myTimeout2() {
  document.getElementById("demo").innerHTML = "4 seconds";
}
function myTimeout3() {
  document.getElementById("demo").innerHTML = "6 seconds";
}
</script>

</body>
</html>

Une horloge créée avec un événement de timing

<!DOCTYPE html>
<html>

<body onload="startTime()">

<h2>JavaScript Clock</h2>

<div id="txt"></div>

<script>
function startTime() {
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt').innerHTML =  h + ":" + m + ":" + s;
  setTimeout(startTime, 1000);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  return i;
}
</script>

</body>
</html>