JavaScriptタイマーとは？
JavaScriptのタイマーは、Webページ上で時間に基づいてコードを実行することを可能にする機能です。これにより、アニメーション、遅延実行、定期的なタスクの実行など、さまざまな動的な効果を実現できます。
タイマー関数
JavaScriptには、主に2つのタイマー関数が用意されています。
| 関数 | 説明 |
|---|---|
setTimeout(function, milliseconds) |
指定したミリ秒後に、一度だけ関数を呼び出します。 |
setInterval(function, milliseconds) |
指定したミリ秒ごとに、繰り返し関数を呼び出します。 |
setTimeout関数
setTimeout関数は、関数が実行されてから関数内で指定した時間の分だけ時間が経過した後に、特定の動作をさせたいという場合に使うことができる関数です。
使い方
```javascript let timerId = setTimeout(function, milliseconds); ```function: 実行する関数milliseconds: 関数を実行するまでの時間（ミリ秒単位）timerId: setTimeout関数によって返されるタイマーID。タイマーをキャンセルする場合などに使用します。
例
3秒後にアラートを表示する例です。
<script>
function showAlert() {
alert('3秒が経過しました！');
}
setTimeout(showAlert, 3000);
</script>
setInterval関数
setInterval関数は、指定したミリ秒ごとに繰り返し関数を呼び出す関数です。アニメーションや定期的な更新処理などに使用されます。
使い方
```javascript let intervalId = setInterval(function, milliseconds); ```function: 実行する関数milliseconds: 関数を実行する間隔（ミリ秒単位）intervalId: setInterval関数によって返されるインターバルID。インターバルをキャンセルする場合などに使用します。
例
1秒ごとにコンソールにメッセージを出力する例です。
<script>
let count = 0;
let intervalId = setInterval(function() {
console.log(`カウント: ${count}`);
count++;
}, 1000);
</script>
タイマーのキャンセル
setTimeoutやsetIntervalで設定したタイマーは、clearTimeout関数とclearInterval関数を使ってキャンセルすることができます。
まとめ
JavaScriptのタイマーは、時間に基づいてコードを実行するための便利な機能です。アニメーション、遅延実行、定期的なタスクの実行など、さまざまな場面で活用できます。タイマー関数を使いこなして、より動的でインタラクティブなWebページを作成しましょう。
参考資料
よくある質問
Q1: setTimeoutとsetIntervalの違いは何ですか？
setTimeoutは指定時間後に一度だけ関数を実行します。一方、setIntervalは指定時間ごとに繰り返し関数を実行します。
Q2: タイマーの精度について教えてください
JavaScriptのタイマーは、ブラウザやシステムの負荷状況によって正確に動作しない場合があります。正確なタイミングを要求される処理には、タイマーではなくrequestAnimationFrameAPIの利用を検討してください。
Q3: タイマーをキャンセルするにはどうすればよいですか？
setTimeoutで設定したタイマーはclearTimeout関数で、setIntervalで設定したタイマーはclearInterval関数でキャンセルできます。それぞれの関数には、キャンセルしたいタイマーのIDを渡します。
その他の参考記事:JavaScript の約束