setTimeoutで遅延

• タイマー処理の基礎
• setTimeoutで遅延実行
• setIntervalで定期実行とクリア

タイマー処理の基礎

JavaScript初心者にとって、タイマー処理は非同期プログラミングの入り口です。タイマーは「時間」を扱うため、実行タイミングを制御する重要な手段です。ブラウザ環境では setTimeout と setInterval が代表的な API です。setTimeout は指定した時間後に一度だけ関数を実行し、setInterval は指定した間隔で関数を繰り返し実行します。これらを使いこなすことで、遅延実行や定期実行を簡単に実装できます。

タイマーは「非同期」に動作します。つまり、メインスレッドをブロックせずに時間を待ち、待機が終わったらコールバック関数を呼び出します。これにより、UI の応答性を保ちながらバックグラウンドで処理を行うことが可能です。

setTimeoutで遅延実行

遅延実行は、ある処理を「あとで」実行したいときに使います。setTimeout の構文は次のとおりです。

setTimeout(callback, delay, ...args)

ここで callback は実行したい関数、delay はミリ秒単位の遅延時間、args は関数に渡す引数です。以下は簡単な例です。

function greet(name) {
  console.log('Hello, ' + name + '!');
}

setTimeout(greet, 2000, 'Alice'); // 2秒後に "Hello, Alice!" を表示

上記のコードでは、2秒後に greet 関数が呼び出されます。setTimeout は戻り値としてタイマー ID を返します。この ID は clearTimeout でタイマーをキャンセルする際に使用します。

タイマーをクリアする例は次のとおりです。

const timerId = setTimeout(() => {
  console.log('This will not run');
}, 5000);

clearTimeout(timerId); // 5秒前にキャンセル

遅延実行は、ユーザー入力後に一定時間待ってから処理を行う「デバウンス」や、アニメーションの遅延開始などに利用されます。

setIntervalで定期実行とクリア

定期実行は、一定間隔で処理を繰り返したいときに使います。setInterval の構文は次のとおりです。

setInterval(callback, interval, ...args)

例として、5秒ごとに現在時刻を表示するコードを示します。

function showTime() {
  const now = new Date();
  console.log('現在時刻: ' + now.toLocaleTimeString());
}

const intervalId = setInterval(showTime, 5000); // 5秒ごとに実行

このタイマーは無限に繰り返されます。実行を停止したい場合は clearInterval を使います。

setTimeout(() => {
  clearInterval(intervalId);
  console.log('定期実行を停止しました');
}, 20000); // 20秒後に停止

定期実行は、チャットアプリのメッセージ取得や、ゲームのフレーム更新、定期的なデータ同期などに広く利用されます。タイマーをクリアしないとメモリリークや不要な処理が続くため、必ず停止条件を設けることが重要です。

この記事はAIによって作成されました。