JavaScript setInterval() Repeating Timer

setInterval() repeatedly calls a function after a specified delay in milliseconds. Use it for recurring work such as updating a clock, checking UI state, or refreshing a display, and keep the returned interval ID so you can stop it with clearInterval().

Basic syntax:

const intervalId = setInterval(callback, delay);

Simple example:

const intervalId = setInterval(() => {
  console.log("Runs every second");
}, 1000);

The first callback normally runs after the delay, not immediately. The delay is a minimum scheduling delay, so a busy browser can call it later.

setInterval() Syntax and Return Value Top ↑

setInterval(functionRef, delay)
setInterval(functionRef, delay, arg1, arg2)

The return value is an interval ID. Store it when you need to cancel the repeated task later. The delay is measured in milliseconds, so 1000 means approximately one second.

Pass a Function Instead of a String Top ↑

Older code often passes a string such as setInterval('showTime()', 1000). Avoid this. A string has to be compiled as code and carries similar maintenance and security problems to eval().

function showTime() {
  console.log(new Date().toLocaleTimeString());
}

const id = setInterval(showTime, 1000);

Passing Arguments to the Callback Top ↑

function greet(name) {
  console.log(`Hello ${name}`);
}

const id = setInterval(greet, 2000, "Alex");

An arrow function is often clearer when you need to compute or capture values yourself.

Stopping setInterval() with clearInterval() Top ↑

const id = setInterval(() => {
  console.log("working");
}, 1000);

setTimeout(() => {
  clearInterval(id);
}, 5000);

See the dedicated clearInterval tutorial and the existing setInterval demo.

Timing Accuracy, Long Tasks and Drift Top ↑

setInterval() does not guarantee exact wall-clock timing. Rendering, other JavaScript, inactive tabs, and browser scheduling can delay callbacks. For a clock, calculate the display from new Date() each time instead of assuming that exactly one second elapsed.

When Recursive setTimeout() Is Safer Top ↑

If each run performs asynchronous or unpredictable work, starting a new run on a fixed interval can overlap the previous one. Scheduling the next setTimeout() only after the current work finishes avoids overlap.

async function repeatTask() {
  await doWork();
  setTimeout(repeatTask, 1000);
}

repeatTask();

See recursive timers with setTimeout().

Background Tabs and Timer Throttling Top ↑

Browsers can slow timers in background tabs to save CPU and battery. Do not use interval counts as a precise elapsed-time source. For elapsed duration, calculate against timestamps or use performance.now() where appropriate.

Practical Counter Example Top ↑

let count = 0;
const id = setInterval(() => {
  count += 1;
  console.log(count);
  if (count === 5) clearInterval(id);
}, 1000);

Related examples: formatting time, stopwatch, and setTimeout reminder.

Common setInterval() Mistakes Top ↑

• Passing a string instead of a function.
• Creating a new interval every time a button is clicked without clearing the previous one.
• Assuming the delay is exact.
• Letting asynchronous work overlap.
• Losing the interval ID and then being unable to stop it.

More examples: basic setInterval demo, add-to-favorites legacy example, and JavaScript redirect.

← Window Object clearInterval() →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: