システム開発
2024.02.14
JavaScript setInterval：一定間隔でコードを実行する方法
Webページに動きを加えたい、リアルタイムな情報更新を実現したいといった場合、JavaScriptのsetInterval関数は非常に便利です。
この関数を使うと、一定の間隔で指定したコードを繰り返し実行することができます。
本記事では、setInterval関数の使い方を、初心者でも理解しやすいように、豊富なコード例を用いて解説します。
この記事でわかること
- setInterval関数の基本構文
- setInterval関数の注意点
setInterval関数の基本構文
setInterval関数は以下の形式で記述します。
| const intervalId = setInterval(function, milliseconds); |
- intervalId: setInterval関数によって返されるID
- function: 実行したい関数
- milliseconds: 関数を実行する間隔（ミリ秒単位）
例：1秒ごとにカウントアップする
| let count = 0; const intervalId = setInterval(() => { count++; console.log(`カウント：${count}`); }, 1000); // 1秒ごとに実行 // 5秒後にカウントを停止 setTimeout(() => { clearInterval(intervalId); }, 5000); |
このコードは、1秒ごとにcount変数を1ずつ増やし、コンソールにカウント値を出力します。
5秒後にclearInterval関数を使って、setInterval関数によって実行される処理を停止します。
setInterval関数の注意点
- setInterval関数によって実行される処理は、ブラウザが閉じられるまで続けて実行されます。
- 処理が重い場合、ブラウザの動作が遅くなる可能性があります。
- 処理を停止したい場合は、clearInterval関数を使う必要があります。
setInterval関数の応用例
- アニメーション
- リアルタイムな情報更新
- カウントダウンタイマー
- スライドショー
まとめ
setInterval関数は、Webページに動きを加えたり、リアルタイムな情報更新を実現したりするのに便利な関数です。
本記事を参考に、setInterval関数を活用して、より魅力的なWebページを作成しましょう。
