← カテゴリ一覧に戻る

タイマー処理

setTimeout setInterval requestAnimationFrame

遅延実行・繰り返し処理・アニメーションループなどタイマー関連APIをまとめます。

デモ：setTimeout（遅延実行）

デモ：setInterval（繰り返し実行）

0

デモ：requestAnimationFrame（高精度ストップウォッチ）

00:00.00

コード例

js
// setTimeout：一定時間後に1回実行
const id = setTimeout(() => {
  console.log('3秒後に実行');
}, 3000);
// キャンセル
clearTimeout(id);

// setInterval：一定間隔で繰り返し実行
const id2 = setInterval(() => {
  counter++;
  if (counter >= 10) clearInterval(id2); // 10回で停止
}, 1000);
clearInterval(id2); // 任意のタイミングで停止

// requestAnimationFrame：ディスプレイの更新に同期（~60fps）
let startTime;
function animate(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsed = timestamp - startTime;

  el.style.transform = `translateX(${elapsed * 0.1}px)`;

  if (elapsed < 2000) {
    requestAnimationFrame(animate); // 次フレームをリクエスト
  }
}
const rafId = requestAnimationFrame(animate);
cancelAnimationFrame(rafId); // キャンセル

比較：setTimeout vs setInterval vs requestAnimationFrame

API精度非表示時用途
setTimeout△ 最低4ms遅延が増える遅延実行、デバウンス
setInterval△ ドリフトあり遅延が累積定期ポーリング、カウンター
requestAnimationFrame✅ 最高（~16ms）✅ 自動停止アニメーション、描画ループ

NEWscheduler.postTask()（タスク優先度制御）

タスクの優先度（user-blocking / user-visible / background）を指定してスケジューリングできるAPIです。メインスレッドのブロッキングを防ぎます。

js
// 優先度: "user-blocking" > "user-visible" > "background"
await scheduler.postTask(() => {
  // 重い処理
  processLargeData();
}, { priority: 'background' }); // バックグラウンドで実行

// キャンセル可能なタスク
const controller = new TaskController({ priority: 'user-visible' });
scheduler.postTask(task, { signal: controller.signal });
controller.abort(); // キャンセル

// ブラウザ対応: Chrome 94+, Edge 94+

🤖 AIプロンプトテンプレート

以下のようなsetTimeout / setInterval / clearTimeoutを使ったタイマー処理のサンプルコードを生成してください：
- setTimeoutで指定ミリ秒後に一度だけ処理を実行し、clearTimeoutでキャンセルする方法
- setIntervalで1秒ごとにカウントアップし、clearIntervalで停止する実装
- requestAnimationFrameを使ったスムーズなアニメーションループの実装
- 自己呼び出しsetTimeoutでsetIntervalのドリフト問題を回避するパターン
- scheduler.postTask()を使った優先度付きタスクスケジューリングの実装例

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo