0Pricing
JavaScript Academy · Lesson

setTimeout, setInterval, and timer drift

Schedule one-off and repeating tasks with setTimeout/setInterval and learn a simple technique to reduce timer drift.

setTimeout, setInterval, and timer drift is a free JavaScript Academy lesson on CoddyKit — lesson 1 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Intro to timers

Goal: Schedule work cleanly.

  • setTimeout: run later (once)
  • setInterval: run repeatedly
  • Drift: why timers slip
  • Simple drift fix
setTimeout, setInterval, and timer drift — illustration 1

setTimeout — one-off

setTimeout(fn, ms) runs once after the delay (minimum timing, not exact).

// setTimeout schedules a one-off callback
console.log("A: start");

setTimeout(function () {
  console.log("B: after ~5ms");
}, 5);

console.log("C: scheduled");
setTimeout, setInterval, and timer drift — illustration 2

setInterval — repeating

setInterval repeats automatically; use clearInterval(id) to stop.

// setInterval repeats; always clear it
let count = 0;

const id = setInterval(function () {
  count = count + 1;
  console.log("tick", count);

  // Stop after 3 ticks to avoid endless logs
  if (count >= 3) {
    clearInterval(id);
    console.log("stopped");
  }
}, 5);
setTimeout, setInterval, and timer drift — illustration 3

See drift happen

Real gaps vary; work, device load, and the event loop cause drift.

// Drift demo: expected vs actual timing
const targetMs = 5;
let last = Date.now();
let times = 0;

const driftId = setInterval(function () {
  const now = Date.now();
  const gap = now - last; // actual gap
  last = now;
  times = times + 1;
  console.log("gap~", gap, "ms");

  if (times >= 3) {
    clearInterval(driftId);
    console.log("done");
  }
}, targetMs);
setTimeout, setInterval, and timer drift — illustration 4

Aligned scheduling

Align to a moving expected time: compute the next delay from it to avoid accumulating error.

// Simple drift fix: schedule from the expected time
const step = 5;
let expected = Date.now() + step;
let ticks = 0;

function tick() {
  ticks = ticks + 1;
  const now = Date.now();
  const drift = now - expected; // positive if we are late
  console.log("drift:", drift, "ms");

  // Compute next expected time first
  expected = expected + step;

  // Next delay = time until the next expected timestamp
  const nextDelay = Math.max(0, expected - Date.now());

  if (ticks < 3) {
    setTimeout(tick, nextDelay);
  } else {
    console.log("aligned stop");
  }
}

setTimeout(tick, step);
setTimeout, setInterval, and timer drift — illustration 5

Tips & checklist

Tips:

  • Always clearInterval when finished.
  • Prefer aligned setTimeout loops for steady cadence.
  • Keep timer callbacks short to reduce drift.
setTimeout, setInterval, and timer drift — illustration 6

Drift fix quiz

Quick check: Drift reduction.

setTimeout, setInterval, and timer drift — illustration 7

Recap

Recap: Use setTimeout for one-offs, setInterval for repeats (remember to clear), and reduce drift by aligning next runs to expected times.

setTimeout, setInterval, and timer drift — illustration 8

Frequently asked questions

Is the “setTimeout, setInterval, and timer drift” lesson free?

Yes — the full text of “setTimeout, setInterval, and timer drift” is free to read here on the web, and the JavaScript Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “setTimeout, setInterval, and timer drift”?

Schedule one-off and repeating tasks with setTimeout/setInterval and learn a simple technique to reduce timer drift. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “setTimeout, setInterval, and timer drift” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. setTimeout, setInterval, and timer drift
  2. Debounce vs Throttle — hand-rolled
  3. Animation Timing — intro with time-based loops
← Back to JavaScript Academy