JavaScript Window setInterval() Method

What You’ll Learn

The setInterval() method runs a function on a repeating timer. This tutorial covers syntax, interval IDs, delay in milliseconds, passing arguments, stopping with clearInterval(), comparison with setTimeout(), five examples, and cleanup habits.

Introduction

Many features need code to run again and again: live clocks, countdown timers, slideshows, and polling for new messages. JavaScript timers handle this without blocking the page. The setInterval() method schedules a callback on the browser’s event loop so your UI stays responsive between ticks.

Each call returns an interval ID. Keep that ID so you can stop the loop with clearInterval() when the user clicks Stop or navigates away. Forgetting to clear intervals is a common source of bugs and wasted battery life.

Understanding the setInterval() Method

setInterval(callback, delayMs, arg1, arg2, ...) registers callback to run every delayMs milliseconds (minimum ~4ms in modern browsers, but use sensible values like 1000 for a one-second clock). It returns a numeric ID immediately—the first run happens after the delay, not instantly.

Timers are asynchronous: code after setInterval() runs right away while the callback waits for the clock. Multiple intervals can run at the same time; each has its own ID.

📝 Syntax

General form of setInterval():

const intervalId = setInterval(callback, delayMs, param1, param2);

// shorthand (same in browsers):
const id = setInterval(tick, 1000);

Parameters

• callback — function to execute on each tick. Can be a function reference or inline function.
• delayMs — milliseconds between calls. Use 1000 for one second.
• param1, param2, ... (optional) — extra values passed to callback.

Return value

• A numeric interval ID. Pass it to clearInterval() to cancel.

Related APIs

• clearInterval(id) — stop a repeating timer.
• setTimeout(fn, ms) — run once after a delay.
• clearTimeout(id) — cancel a one-shot timer.
• requestAnimationFrame(fn) — smooth animation frames.

Examples Gallery

Use the Try-it links to start timers in the browser. Watch the output update on each tick, then stop intervals when done.

function logMessage() {
  console.log("Interval elapsed — executing function…");
}

const intervalId = setInterval(logMessage, 2000);

Interval elapsed — executing function…
Interval elapsed — executing function…
…

function updateClock() {
  const now = new Date().toLocaleTimeString();
  document.getElementById("clock").textContent = now;
}

updateClock(); // show immediately
setInterval(updateClock, 1000);

Clock: 6:18:42 PM
(updates every second)

let intervalId = null;
let count = 0;

document.getElementById("startBtn").onclick = function () {
  if (intervalId !== null) return;
  intervalId = setInterval(function () {
    count++;
    document.getElementById("count").textContent = count;
  }, 500);
};

document.getElementById("stopBtn").onclick = function () {
  clearInterval(intervalId);
  intervalId = null;
};

Start → count increases every 500ms
Stop → counter freezes
Start again → resumes from same count

function greet(name) {
  console.log("Hello, " + name + "!");
}

setInterval(greet, 3000, "Alex");

Hello, Alex!
Hello, Alex!
…

let ticks = 0;
const maxTicks = 5;

const intervalId = setInterval(function () {
  ticks++;
  console.log("Tick " + ticks);

  if (ticks >= maxTicks) {
    clearInterval(intervalId);
    console.log("Done — interval cleared.");
  }
}, 1000);

Tick 1
Tick 2
Tick 3
Tick 4
Tick 5
Done — interval cleared.

🚀 Common Use Cases

• Live clocks and countdowns — update time display every second.
• Image slideshows — advance slides on a timer (clear when hidden).
• Polling APIs — fetch new data every N seconds (prefer WebSockets when possible).
• Progress indicators — simulate loading steps in tutorials.
• Simple animations — move elements in small steps (consider requestAnimationFrame for smooth motion).
• Session timeouts — warn users before auto-logout.

📝 Notes

• Delay is minimum time, not exact—busy tabs may tick late.
• Do not start a second interval without clearing the first—ticks will stack.
• Long-running callback code can overlap the next tick if it exceeds the delay.
• Background tabs may throttle timers to save battery (intervals > 1000ms are safer).
• In Node.js, setInterval works similarly but IDs differ from browser numbers.
• For visual animation at 60fps, prefer requestAnimationFrame over setInterval(fn, 16).

💡 Best Practices