スキルアップを始める!

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

JavaScript(ジャバスクリプト)
この記事は約3分で読めます。
\ワードプレスのスキルアップはこちら!/ WordPress入門読本

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

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

URLをコピーしました!