JavaScript Timing Events

JavaScript can execute code at specified time intervals, known as timing events.

Timing Events

The window object allows the execution of code at specified time intervals. The two key methods are:

• setTimeout(function, milliseconds): Executes a function after waiting a specified number of milliseconds.
• setInterval(function, milliseconds): Repeats the execution of a function continuously at specified time intervals.

These methods are part of the HTML DOM Window object.

The setTimeout() Method

The setTimeout() method executes a function after a specified number of milliseconds.

Syntax

window.setTimeout(function, milliseconds);

‍

The window.setTimeout() method can be called without the window prefix. The first parameter is the function to be executed, and the second parameter is the number of milliseconds to wait before execution.

Example

Click a button, wait 3 seconds, and the page will alert "Hello":<button onclick="setTimeout(myFunction, 3000)">Try it</button>‍<script>function myFunction() {  alert('Hello');}</script>

‍

Stopping the Execution

The clearTimeout() method stops the execution of the function specified in setTimeout().

Syntax

window.clearTimeout(timeoutVariable);

‍

he window.clearTimeout() method can be called without the window prefix. It uses the variable returned from setTimeout():

let myVar = setTimeout(function, milliseconds);

clearTimeout(myVar);

‍

Example

Same example as above, but with an added "Stop" button:

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

‍

The setInterval() Method

The setInterval() method repeats a given function at specified time intervals.

Syntax

window.setInterval(function, milliseconds);

‍

The window.setInterval() method can be called without the window prefix. The first parameter is the function to be executed, and the second parameter is the length of the time interval between each execution.

Example

Display the current time every second:

<p id="demo"></p>‍<script>setInterval(myTimer, 1000);‍function myTimer() {  const d = new Date();  document.getElementById("demo").innerHTML = d.toLocaleTimeString();}</script>‍

There are 1000 milliseconds in one second.

Stopping the Execution

The clearInterval() method stops the execution of the function specified in the setInterval() method.

Syntax

window.clearInterval(timerVariable);‍The window.clearInterval() method can be called without the window prefix. It uses the variable returned from setInterval():let myVar = setInterval(function, milliseconds);clearInterval(myVar);

‍

Example

Same example as above, but with a "Stop time" button:

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

‍