Understanding setTimeout and setInterval in JavaScript

The setTimeout function allows us to execute a function at a later time, while setInterval repeatedly executes a function at a fixed interval. This guide explains their usage and differences with examples.

Banner

What is setTimeout?

The setTimeout function is used to run a function at a specific time in the future. It takes two main parameters:

A callback function (without calling it immediately).
A delay time in milliseconds.

Example:


console.log('Running line 1');

function alertFunc(order) { console.log(Your ${order} is ready); }

setTimeout(alertFunc, 3000, "pizza");

console.log('Running line 3');

Output:


Running line 1 Running line 3 Your pizza is ready

Explanation:

"Running line 1" is logged immediately.
setTimeout(alertFunc, 3000, "pizza") schedules the alertFunc function to run after 3 seconds, but does not block execution.
"Running line 3" is logged immediately.
After 3 seconds, "Your pizza is ready" appears.

How to Pass Parameters to setTimeout

You can pass arguments to the function by listing them after the delay time:


function alertFunc(order) { console.log(Your ${order} is ready); }

setTimeout(alertFunc, 3000, "burger");

After 3 seconds, the output will be:


Your burger is ready

setTimeout Runs Only Once

Since setTimeout executes the function only once, if you need it to run multiple times, use setInterval. Using setInterval for Repeating Execution

The setInterval function repeatedly calls a function at a fixed interval (in milliseconds). Example:


function repeatMessage() { console.log("This message repeats every 2 seconds."); }

setInterval(repeatMessage, 2000);

Output:


This message repeats every 2 seconds. This message repeats every 2 seconds. This message repeats every 2 seconds. ...

The function continues running indefinitely every 2 seconds until you stop it using clearInterval(). Stopping setInterval with clearInterval

To stop an interval, use clearInterval() by storing the interval ID:


let intervalID = setInterval(() => { console.log("This will stop after 6 seconds"); }, 2000);

setTimeout(() => { clearInterval(intervalID); console.log("Interval stopped."); }, 6000);

Output:


This will stop after 6 seconds This will stop after 6 seconds This will stop after 6 seconds Interval stopped.

This ensures the function runs only three times before being stopped. Conclusion

Use setTimeout to delay a function’s execution once.
Use setInterval for repeated execution.
Stop setInterval using clearInterval() when necessary.

Mastering these functions helps in handling asynchronous behavior efficiently in JavaScript. 🚀

Understanding setTimeout and setInterval in JavaScript | Software Engineer Blog