Working With Timers In JavaScript

It explains using the setTimeout and setInterval functions in JavaScript to schedule or trigger a function or code to execute at a specific time or interval. The setTimeout can be used to execute the code once at a specific time whereas setInterval can be used to execute the code at a specific interval.

We can schedule the code to be executed after the specified duration or at certain intervals using the functions setTimeout and setInterval respectively. E.g. show a popup after 10 seconds after the page gets loaded. This tutorial shows how to use these functions.

setTimeout

The function setTimeout can be used to execute the function after the specified duration. We can either pass the anonymous function or the function name as an argument to execute it.

Syntax

The function setTimeout accepts the function as the first argument. The second argument is the duration in milliseconds. We can also pass multiple arguments to pass to the function.

setTimeout( function, millis, param1, param2, ... )

Usage

We can use an anonymous function as shown below.

// Execute the anonymous function after 5 seconds

setTimeout( function() {
	alert( "Hello JavaScript." );
}, 5000 );

setTimeout( function( name ) {
	alert( "Hello " + name + "." );
}, 5000, "Ricky" );

We can also simply pass the function reference as shown below.

// Execute the given function after 5 seconds

setTimeout( alertName, 5000 );

setTimeout( alertName, 5000, "Ricky" );

function alertName( name ) {

	if( name === undefined ) {

		alert( "Hello JavaScript." );
	}
	else {

		alert( "Hello " + name + "." );
	}
}

In certain situations, we might be required to abort the function call before it gets executed. It can be done by storing the call to setTimeout function in a variable and passing the same to the clearTimeout function to abort it.

// Execute the given function after 15 seconds

var alertNameTimer = setTimeout( alertName, 15000 );

// .....

clearTimeout( alertNameTimer );

// .....

setInterval

The function setInterval can be used to execute the function after the specified interval. Similar to the setTimeout, we can either pass the anonymous function or the function name as an argument to execute it.

Syntax

The function setInterval accepts the function as the first argument. The second argument is the interval in milliseconds. The function gets executed after the specified interval. We can also pass multiple arguments to pass to the function.

setInterval( function, millis, param1, param2, ... )

Usage

We can pass the function reference as shown below. We can also use an anonymous function as shown in the previous section.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<script>
			// Update the counter after every 5 seconds
			setInterval( updateCounter, 5000 );

			function updateCounter() {

				var counter	= document.getElementById( "counter" );
				var value	= counter.innerHTML;

				counter.innerHTML = parseInt( value ) + 1;
			}
		</script>
	</head>
	<body>
		<div id="counter">0</div>
	</body>
</html>

In certain situations, we might be required to abort the function call before it gets executed. It can be done by storing the call to setInterval function in a variable and passing the same to the clearInterval function to abort it.

// Update the counter after every 5 seconds

var counterTimer = setTimeout( updateCounter, 5000 );

// .....

clearInterval( counterTimer );

// .....

Summary

This is how we can use the setTimeout and setInterval functions to call a function after a specified duration or at the given interval. We also saw using the functions clearTimeout and clearInterval to abort the function call if required.

You may also be interested in the more advanced usage of the timer using the function requestAnimationFrame as shown in How To Make Digital Clock in JavaScript.

Write a Comment

Discussion Forum by DISQUS