BOM Timing (Timing Events)

JavaScript has timing events as it can be executed in time-intervals.


Timing Events

The window object allows execution of code at specified time intervals.

The below two key methods in javascript:

  • setTimeout(function, milliseconds)
    Executes a function, after waiting a specified number of milliseconds.
  • setInterval(function, milliseconds)
    Same as setTimeout(), but repeats the execution of the function continuously.

     Note:- setTimeout() and setInterval() are both methods of the HTML DOM Window object.


setTimeout() Method

window.setTimeout(function, milliseconds);

The window.setTimeout() method can be used without the window prefix.

  • The first parameter is a function to be executed.
  • The second parameter provides the number of milliseconds before execution.
Input:-
<!DOCTYPE html>
<html>
<body>

<p>Click "Try me". Wait 5 seconds, and the page will execute alert "Hello".</p>

<button onclick="setTimeout(myFunc, 5000);">Try me</button>

<script>
function myFunc() {
  alert('My World');
}
</script>

</body>
</html>

Output (Before click):-

Output (After 5 seconds of click ):-


How to Stop the Execution?

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

window.clearTimeout(timeoutVariable)

The window.clearTimeout() method can be used without the window prefix. The clearTimeout() method uses the variable returned by setTimeout():

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

If the function has not already been executed, you can stop the execution by calling the clearTimeout() method:

Input:-
<!DOCTYPE html>
<html>
<body>

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

<button onclick="myVar = setTimeout(myFunc, 5000)">Try me</button>

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

<script>
function myFunc() {
  alert("My World");
}
</script>
</body>
</html>

Output (Before click):-

Output (After click on “Try me” and before 5 seconds of click on “Stop Execution” to stop the timeout event):-


The setInterval() Method

The setInterval() method used to repeats a given function at every given time-interval.

window.setInterval(function, milliseconds);

The window.setInterval() method can be used without the window prefix.

  • The first parameter is the function to be executed.
  • The second parameter indicates the length of the time-interval between each execution.

This example executes a function called “myIntervalTimer” after every two second which will increase the number after every two seconds.

Input:-
<!DOCTYPE html>
<html>
<body>

<p>Example for setInterval</p>

<p id="result"></p>

<script>
setInterval(myIntervalTimer, 2000);
var d = 1;
function myIntervalTimer() {
	d++;
  	document.getElementById("result").innerHTML = d;
}
</script>

</body>
</html> 

Output (Increasing the number continuously after every 2 seconds):-

Note:- There are 1000 milliseconds in one second.


How to Stop the Execution?

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

window.clearInterval(myVar)

The window.clearInterval() method can be used without the window prefix.

The clearInterval() method uses the variable returned from setInterval():

myVar = setInterval(function, milliseconds);
clearInterval(myVar);
Input:-
<!DOCTYPE html>
<html>
<body>

<p>Example for setInterval</p>

<button onclick="clearInterval(myVar)">Stop Time Interval</button>
<p id="result"></p>

<script>
var myVar = setInterval(myIntervalTimer, 2000);
var d = 1;
function myIntervalTimer() {
	d++;
  	document.getElementById("result").innerHTML = d;
}
</script>

</body>
</html> 

Output (Increasing the number continuously after every 2 seconds):-

Output (After Click on Stop Time Interval button the execution will be stopped):-