【JavaScript入門】タイマーのズレ問題とは？setIntervalが遅れる理由と正確なタイマーの作り方

JavaScriptのタイマーは便利ですが、実は指定した時間どおりに動かないことがあります。
特に setInterval() を使った繰り返し処理では、処理が重くなると少しずつ遅れが蓄積し、最終的に大きなズレが発生することもあります。

この記事では、タイマーがズレる原因と、正確なタイマーを作るための方法を初心者向けにわかりやすく解説します。

なぜJavaScriptのタイマーはズレるのか？

JavaScriptはシングルスレッドで動作しており、1つの処理が終わるまで次の処理に進めません。
そのため、タイマーの実行タイミングになっても、他の処理が実行中だとタイマーが遅れてしまいます。

この仕組みは「イベントループ」と呼ばれ、タイマーのズレの原因になります。

例：setInterval がズレるケース

setInterval(() => {
    const start = Date.now();
    while (Date.now() - start < 500) {
        // 500msの重い処理
    }
    console.log("実行:", new Date().toLocaleTimeString());
}, 1000);

1秒ごとに実行したいのに、実際には1.5秒ごとのようにズレていきます。

setInterval のズレを防ぐ方法

ズレを防ぐためには、setTimeout を再帰的に呼び出す方法が有効です。
この方法では、処理が終わってから次のタイマーをセットするため、ズレが蓄積しにくくなります。

正確なタイマーの作り方（再帰setTimeout）

function loop() {
    const start = Date.now();
    console.log("実行:", new Date().toLocaleTimeString());

    setTimeout(() => {
        loop();
    }, 1000 - (Date.now() - start));
}

loop();

処理にかかった時間を引いて次の実行タイミングを調整するため、ズレが最小限に抑えられます。

実例：正確なカウントダウンタイマー

let remaining = 10;

function countdown() {
    const start = Date.now();
    console.log(remaining);
    remaining--;

    if (remaining < 0) return;

    setTimeout(() => {
        countdown();
    }, 1000 - (Date.now() - start));
}

countdown();

setInterval よりも正確に1秒ごとにカウントダウンできます。

まとめ

• JavaScriptのタイマーは処理の重さによってズレることがある
• setInterval はズレが蓄積しやすい
• 正確なタイマーには再帰setTimeoutが有効
• カウントダウンなどは setTimeout 方式が安定