How setInterval Works in JavaScript: Architecture

// setInterval(callback, intervalMs, ...args)
const intervalId = setInterval(callback, interval, arg1, arg2);
clearInterval(intervalId); // Stop it

let count = 0;
 
const id = setInterval(() => {
  count++;
  console.log(`Tick ${count}`);
 
  if (count === 5) {
    clearInterval(id); // Stop after 5 ticks
    console.log("Stopped");
  }
}, 1000);
 
// Tick 1 (after ~1s)
// Tick 2 (after ~2s)
// ...
// Tick 5 (after ~5s)
// Stopped

// Interval: 1000ms, but callback takes 1500ms
let lastRun = Date.now();
 
setInterval(() => {
  const now = Date.now();
  console.log(`Gap since last run: ${now - lastRun}ms`);
  lastRun = now;
 
  // Simulate 1500ms of work
  const start = Date.now();
  while (Date.now() - start < 1500) {}
}, 1000);
 
// Actual output (approximate):
// Gap since last run: 1000ms
// Gap since last run: 1500ms  <-- first callback ran long
// Gap since last run: 1500ms  <-- interval couldn't fire on time

// setInterval schedules the NEXT tick at a FIXED time from the ORIGINAL start
setInterval(() => {
  doWork(); // If this takes 200ms, the NEXT call starts shorter than 1000ms later
}, 1000);
 
// Recursive setTimeout schedules the NEXT call after THIS call finishes
function scheduleRecursive() {
  doWork(); // If this takes 200ms...
  setTimeout(scheduleRecursive, 1000); // NEXT run starts 1000ms from NOW
}
setTimeout(scheduleRecursive, 1000);

function createAccurateInterval(callback, interval) {
  const start = performance.now();
  let expectedTick = start + interval;
  let timerId = null;
 
  function tick() {
    callback();
 
    const now = performance.now();
    const drift = now - expectedTick;
    expectedTick += interval;
 
    // Adjust next delay to compensate for drift
    const nextDelay = Math.max(0, interval - drift);
    timerId = setTimeout(tick, nextDelay);
  }
 
  timerId = setTimeout(tick, interval);
 
  return {
    stop() {
      clearTimeout(timerId);
    }
  };
}
 
const clock = createAccurateInterval(() => {
  console.log(new Date().toLocaleTimeString());
}, 1000);
 
// Stays accurate even after several minutes

function createStopwatch() {
  let running = false;
  let elapsed = 0;
  let startTime = null;
  let intervalId = null;
 
  function format(ms) {
    const minutes = Math.floor(ms / 60000);
    const seconds = Math.floor((ms % 60000) / 1000);
    const centiseconds = Math.floor((ms % 1000) / 10);
    return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}.${String(centiseconds).padStart(2, "0")}`;
  }
 
  return {
    start() {
      if (running) return;
      running = true;
      startTime = Date.now() - elapsed;
 
      intervalId = setInterval(() => {
        elapsed = Date.now() - startTime;
        // Use actual Date.now() difference, not accumulated interval ticks
        console.log(format(elapsed));
      }, 10); // Update every 10ms (centisecond precision)
    },
 
    stop() {
      if (!running) return;
      clearInterval(intervalId);
      running = false;
    },
 
    reset() {
      clearInterval(intervalId);
      running = false;
      elapsed = 0;
      startTime = null;
    },
 
    getTime() {
      return elapsed;
    }
  };
}
 
const sw = createStopwatch();
sw.start();
setTimeout(() => { sw.stop(); console.log("Final:", sw.getTime()); }, 3000);

// LEAKY: No way to stop this interval
setInterval(() => {
  console.log("Running forever...");
}, 1000);
 
// FIX: Always store the ID
const id = setInterval(() => {
  console.log("Stoppable");
}, 1000);
 
// Later:
clearInterval(id);

// WRONG: setInterval for animation
let x = 0;
setInterval(() => {
  element.style.transform = `translateX(${x++}px)`;
}, 16); // ~60fps but imprecise and not synced to display
 
// RIGHT: requestAnimationFrame for animation
function animate() {
  element.style.transform = `translateX(${x++}px)`;
  if (x < 300) {
    requestAnimationFrame(animate);
  }
}
requestAnimationFrame(animate);

// LEAKY React-like pattern
function setupWidget() {
  const id = setInterval(updateUI, 1000);
  // If the component is destroyed without clearInterval, the interval leaks
}
 
// FIX: Always return cleanup function
function setupWidget() {
  const id = setInterval(updateUI, 1000);
  return () => clearInterval(id); // Cleanup function
}
 
const cleanup = setupWidget();
// When widget is destroyed:
cleanup();

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    console.log("Tab hidden: intervals will throttle to ~1s minimum");
  } else {
    console.log("Tab visible: intervals run at normal speed");
  }
});
 
// For critical intervals (e.g., WebSocket keepalive), use Web Workers
// which are NOT throttled by tab visibility

function createPoller(fetchFn, intervalMs = 5000) {
  let id = null;
  let active = false;
 
  return {
    start() {
      if (active) return;
      active = true;
      fetchFn(); // Run immediately on start
      id = setInterval(fetchFn, intervalMs);
    },
 
    stop() {
      clearInterval(id);
      id = null;
      active = false;
    },
 
    isActive() {
      return active;
    }
  };
}
 
const statusPoller = createPoller(async () => {
  const res = await fetch("/api/status");
  const data = await res.json();
  console.log("Status:", data.status);
}, 10000);
 
statusPoller.start();
// Later:
statusPoller.stop();