【JavaScript】setTimeout()の使い方｜指定された時間後にコードを実行するメソッド

setTimeout() は、指定された時間後にコードを実行する JavaScript のメソッドです。よく使われる機能ですが、細かい仕様や注意点もあり、使いこなすにはいくつかのポイントがあります。

setTimeout() の基本構文

setTimeout(function() {
  // 実行したい処理
}, 経過時間);

• function() { ... }: 実行したい処理を記述した関数
• 経過時間: コードを実行するまでの待ち時間（ミリ秒単位）

関数

• 関数式、名前付き関数、アロー関数など、あらゆる種類の関数を指定できます。
• 匿名関数を直接記述することもできます。
• 関数に引数を渡したい場合は、関数内で処理する必要があります。

経過時間

• ミリ秒単位で指定します。1秒は1000ミリ秒なので、5秒後なら5000となります。
• 省略すると、0ミリ秒（つまり即時）に実行されます。
• 浮動小数点数も使用できますが、小数点以下の桁数は無視されます。

処理のタイミング

• setTimeout() は JavaScript エンジンに処理を依頼するだけであり、必ずしも指定された時間に実行されるとは限りません。
• ブラウザの負荷や他のスクリプトの実行状況などによって、遅延が発生する可能性があります。
• 精密なタイミングが必要な場合は、requestAnimationFrame などの他の API を検討する必要があります。

複数のタイマー処理

• 複数の setTimeout() を呼び出すことで、複数のタイマー処理を同時に実行できます。
• 処理の順番を制御したい場合は、setTimeout の戻り値であるタイマーID を利用できます。

タイマーのキャンセル

• clearTimeout(タイマーID) を呼び出すことで、実行予定のタイマー処理をキャンセルできます。
• タイマーID は setTimeout の戻り値として取得できます。
• 不要になったタイマーは明示的にキャンセルすることで、リソースの無駄遣いを防ぎます。

その他

• setTimeout() は非同期処理なので、処理が完了するまで待機せずに次の処理に移行します。
• 処理が完了したタイミングで何か処理を行いたい場合は、callback 関数などを利用する必要があります。

サンプルコード

// 3秒後にアラートを表示
setTimeout(() => {
  alert('3秒経過しました!');
}, 3000);

// 1秒ごとにカウントアップ
let count = 0;
const timerId = setInterval(() => {
  console.log(`カウント: ${count++}`);
}, 1000);

// 5秒後にタイマーをキャンセル
setTimeout(() => {
  clearTimeout(timerId);
  console.log('タイマーをキャンセルしました');
}, 5000);

まとめ

setTimeout() は、指定時間後にコードを実行する JavaScript のメソッドです。必ずしも指定時間に実行されるとは限らない点に注意が必要です。複数のタイマー処理を同時に実行したり、処理の順番を制御したり、タイマーをキャンセルしたり することもできます。

なお、コードは注意してご使用ください。