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.
Set Timeout
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.
