setTimeout、setInterval、タイマーのずれ

タイマー入門

setTimeout — 1回だけ実行

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

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

console.log("C: scheduled");

setInterval — 繰り返し実行

// 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);

ドリフトを確認する

// 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);

基準時刻に合わせたスケジュール

// 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);

ヒントとチェックリスト

ドリフト対策クイズ

まとめ