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