概要
setTimeout や setInterval は「遅らせて処理する」ための単純なAPIではない。
それは**“非同期制御・イベントループ・状態変化のタイミングを制御するための、明示的な設計手段”**である。
タイマー系関数は軽視されやすいが、使用の文脈と設計意図が不明確なまま導入されると、メモリリーク・タイミング競合・予期せぬ再発火など、重大な設計不良を引き起こす。
本稿では、setTimeout / setIntervalの設計的運用と、async/awaitやPromiseとの統合的な使い方を解説する。
1. setTimeout の基本構造と設計目的
setTimeout(() => {
console.log("300ms後に実行");
}, 300);
- ✅ 一度だけ実行される遅延処理
- ✅ アニメーション・非同期連携の待機処理・バックオフ処理に使用
2. setInterval の危険性と設計上の罠
setInterval(() => {
updateStatus();
}, 1000);
- ❌ 処理が1秒以上かかると積み上がる（前回の処理中に次の実行が走る）
- ✅ 長期的な監視や更新には
setTimeoutを再帰的に使う方が安全
function loop() {
updateStatus();
setTimeout(loop, 1000);
}
loop(); // ✅ 安定した間隔
3. タイマーをPromise化して非同期と統合する
function wait(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function runWithDelay() {
await wait(500);
console.log("500ms後に実行");
}
- ✅
async/awaitで明示的な非同期制御に組み込める - ✅ テストや処理順制御にも有効
4. setTimeoutは「最低保証時間」であって正確なスケジューラではない
setTimeout(() => {
console.log("Expected ~100ms"); // 実際は遅れる可能性あり
}, 100);
- ❌ イベントループや他の処理が重いと遅延が保証されない
- ✅ 正確な間隔が必要ならDate.now() を使って自力で時間制御
const start = Date.now();
setTimeout(() => {
console.log(Date.now() - start); // 実測との差分確認
}, 100);
5. 明示的にクリアしなければリークや重複が発生する
const id = setTimeout(doSomething, 1000);
clearTimeout(id); // ✅ 明示的に停止可能
const loopId = setInterval(pollData, 2000);
clearInterval(loopId); // ✅ イベント終了時などにクリア必須
- ✅
clearTimeout/clearIntervalはライフサイクルとセットで設計する
設計判断フロー
① 単発の遅延実行か、周期的な監視処理か？
② setIntervalの実行間隔は、処理時間を超えていないか？
③ タイマーのIDは保持・キャンセルできるよう設計されているか？
④ async/awaitと組み合わせる場合、Promise化されたwait関数を使っているか？
⑤ ライフサイクルの終了時にclearTimeout / clearIntervalを忘れていないか？
よくあるミスと対策
❌ setIntervalの中の処理が重く、ループが破綻
→ ✅ 再帰的setTimeout構造で実行間隔を安定化
❌ タイマーを止める手段がないまま放置され、リーク発生
→ ✅ return用のclearTimeout関数 or フラグによる明示的制御
❌ async関数の中でsetTimeoutを使いたいが await できない
→ ✅ Promise化された wait(ms) ヘルパー関数を導入
結語
setTimeout / setIntervalとは「遅延処理のための低級API」ではない。
それは**“処理タイミング・イベントライフサイクル・非同期フローを構造的に制御するための設計ツール”**である。
-
setTimeoutは再帰で使えば安全なタイミング制御が可能 -
setIntervalは積み上がりの危険性を常に伴う - async/awaitとの組み合わせには Promise化 という戦略が必要
JavaScriptにおけるタイマー制御とは、
“非同期の秩序と構造を保証するための、明示的・戦略的な制御設計”である。