LuisLlamas Logo
javascript-setinterval-settimeout

Using setInterval and setTimeout in JavaScript

  • 4 min
  • Beginner

In JavaScript, setInterval and setTimeout are one of the simplest ways to manage task timing.

These two frequently used methods are an easy way to approach asynchronous programming.

  • setTimeout is used to delay the execution of a function only once.
  • setInterval is used to execute code repeatedly at regular intervals.

Furthermore, they are available both in web browsers and in most runtimes like NodeJs.

Both are suitable for simple timing tasks, but if the tasks are more complex and require finer control, it’s better to opt for Promises and the async/await syntax.

Internal Operation

Both setTimeout and setInterval rely on JavaScript’s event loop, a mechanism that allows handling asynchronous tasks. When you use one of these functions:

  1. The scheduled task is registered in the task queue.
  2. Once the specified time has elapsed, the event loop places the function in the execution stack.
  3. The function executes when the execution stack is empty.

Delayed Execution setTimeout

setTimeout is a function that executes a function or a block of code after a specific time. The basic syntax of setTimeout is:

let timeoutId = setTimeout(function, time, [arguments...]);
Copied!
  • function: The function to be executed after the time elapses.
  • time: The time in milliseconds before executing the function.
  • [arguments…]: Optionally, arguments to pass to the function.

Let’s see it with an example,

function greet() {
  console.log('Hello, world');
}

let timeoutId = setTimeout(greet, 2000); // Executes `greet` after 2 seconds
Copied!

In this example, greet will execute after 2000 milliseconds (2 seconds).

Cancelling setTimeout

To cancel an action scheduled by setTimeout, use clearTimeout, passing the identifier returned by setTimeout.

function showNotification() {
  console.log('Important notification!');
}

let timeoutId = setTimeout(showNotification, 3000);

clearTimeout(timeoutId); // Cancels the notification before it shows
Copied!

In this case, the call to clearTimeout prevents showNotification from executing after 3 seconds.

Periodic Execution setInterval

setInterval is a function that allows executing a function or a block of code repeatedly at regular time intervals. The basic syntax of setInterval is:

let intervalId = setInterval(function, interval, [arguments...]);
Copied!
  • function: The function to be executed repeatedly.
  • interval: The time in milliseconds between each execution of the function.
  • [arguments…]: Optionally, arguments to pass to the function.

Let’s see it with an example,

function greet() {
  console.log('Hello, world');
}

let intervalId = setInterval(greet, 1000); // Executes `greet` every second
Copied!

In this example, greet will execute every second due to the 1000-millisecond interval.

Cancelling setInterval

To stop the repetitive execution started by setInterval, use clearInterval, passing the identifier returned by setInterval.

function greet() {
  console.log('Hello, world');
}

let intervalId = setInterval(greet, 1000);

setTimeout(() => {
  clearInterval(intervalId); // Stops the execution of `greet` after 5 seconds
}, 5000);
Copied!

In this example, greet executes every second, but clearInterval stops the repetition after 5 seconds.

Replacement with Promises

When you need to synchronize multiple time-dependent tasks, consider using Promise along with async/await for more precise control and better error handling.

function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function runTasks() {
  console.log('Start');
  await wait(2000); // Waits for 2 seconds
  console.log('After 2 seconds');
}

runTasks();
Copied!

In this example,

  • wait creates a promise that resolves after a specified delay.
  • await is used to pause the execution of runTasks.

Considerations and Best Practices

  • Timer Precision: setInterval and setTimeout do not guarantee execution precise to the millisecond. The specified time is a minimum time, not an exact time.
    The function may not execute exactly at the end of the interval due to the nature of the event loop and system load.

  • Avoid Nesting: Using setTimeout and setInterval can make your code difficult to manage if you nest them too much.

  • Memory Leaks: Remember to clean up intervals and timeouts when they are no longer needed. If you leave active intervals without canceling them, you can cause memory leaks.

On this page