setTimeout() vs. setInterval() in JavaScript

In this tutorial, we'll explore the differences between the setTimeout() and setInterval() time-based methods in JavaScript, how to use them, and how to implement them into your web applications.

The Syntax

The syntax for both methods is identical except for the name of the function itself:

setTimeout(function|code, delay, [param1, param2, ...]);
setInterval(function|code, delay, [param1, param2, ...]);

The Parameters

Here is a breakdown of the parameters:

• function (required): The name of the function to execute once the timer expires, and great to use in scenarios where you'll execute the same code from multiple locations.
• code (required): The alternative for the function parameter where you can create an inline function that will execute once the timer expires.
• delay (required): The time, in milliseconds, the script will wait until executing the specified function or code. Specifying a value of 0 will execute the code immediately.
• param1, param2, etc. (optional): Additional optional arguments you can pass into your specified function calls.

The setTimeout() Function

The setTimeout() method executes a function call or inline code one time after the timer has expired.

Here is an example where a custom function named myFunc() is executed and outputs text to the console after a one-second delay:

function myFunc() {
	console.log("Hello there!");
}

setTimeout(myFunc, 1000);

// Hello there! (outputs after one second)

Here's the same example, but using an inline function call instead of creating a separate function:

setTimeout(function() {
	console.log("Hello there!");
}, 1000);

// Hello there! (outputs after one second)

Here's one more example where optional parameters get passed in and output to the console:

var i = 1;

setTimeout(function(j) {
	console.log("The value is: " + j);
}, 1000, i);

// The value is: 1 (outputs after one second)

The setInterval() Function

The setInterval() method executes a function call or inline code in regular intervals and in perpetuity until the user leaves or refreshes the page, or until the timer is manually cleared in the script.

Let's slightly modify some of the examples from above. In this example, we'll display the same text to the console every second:

setInterval(function() {
	console.log("Hello there!");
}, 1000);

// Hello there!
// Hello there!
// Hello there!
// ...

Now, we'll increase the value of a variable num by 1 every second and output it to the console:

var num = 0;

setInterval(function() {
	num++;
	
	console.log("The value is: " + num);
}, 1000);

// The value is: 1
// The value is: 2
// The value is: 3
// ...

The Return Value

Both the setTimeout() and setInterval() methods return a timer ID for you to cancel existing timers easily:

var timer_id = setTimeout(myFunc, 1000);
var timer_id = setInterval(myFunc, 1000);

Use different variable names for each running timer to prevent overwriting existing timers.

Cancelling Timers

To cancel a timer, use the appropriate function call, either clearTimeout() or clearInterval(), and pass in the timer ID:

clearTimeout(timer_id);
clearInterval(timer_id);

Conclusion

This article explained the differences between the setTimeout() and setInterval() methods in JavaScript and how to implement them into your web applications.