JavaScriptには時間の経過に応じて特定の動作を繰り返すための便利な関数があります。
その代表的なものがsetIntervalです。
この関数を使うことで、定期的に実行したい処理を指定した間隔で繰り返し実行できます。
この記事では、初心者向けにsetIntervalの基本的な使い方から注意点、活用方法までを解説します。
setIntervalとは？
setIntervalはJavaScriptの組み込み関数で、指定した間隔で特定の関数やコードを繰り返し実行します。
この関数はブラウザのタイマー機能を利用しており、非同期的に処理を行います。
// 基本的な構文
setInterval(処理, 遅延時間);実際に何かコードを書いてみましょう↓
// 例：1秒ごとにコンソールにメッセージを表示する
setInterval(() => {
console.log('1秒経過しました');
}, 1000);
上記の例では、1000ミリ秒（1秒）の間隔でconsoleのログに秒数経過を表示しています。
setIntervalの使い方
setIntervalの基本的な使い方をもう少し詳しく見ていきましょう。
上記のサンプルをそのまま以下にもってきました。実はこのコードのままだとある問題があります。
setIntervalの特徴でもありますが、このコードだけだと、
止めろという指示があるまでこの処理は永久に止まりません。
// 例：1秒ごとにコンソールにメッセージを表示する
setInterval(() => {
console.log('1秒経過しました');
}, 1000);
ではどうやって止めるのかというとclearIntervalというものを使います。
clearIntervalとは
// intervalを止めるやつ
clearInterval(intervalのid);上記のように書くことで一度設定したsetIntervalを止めることができます。
どのsetIntervalを止めるのかはidを指定して判別できるので、
冒頭の1秒ずつログを吐くコードにidを指定しつつ、実際にclearIntervalを合体させてみると、
// 1秒ごとにコンソールにメッセージを表示する関数
const intervalId = setInterval(() => {
console.log('1秒経過しました');
}, 1000);
// 5秒後にタイマーを停止する
setTimeout(() => {
clearInterval(intervalId);
console.log('タイマーを停止しました');
}, 5000);上記のように書く事ができます。
この例では５秒たったらsetIntervalのループを止める、という風にしています。
setTimeoutとの違い
さて、もうわかってるかもしれませんが、少し似ているsetTimeoutとの違いは何かというと
どちらも同じく時間経過後に特定の処理を行う関数ですが、
setTimeoutは一度だけ実行される関数です。
// 3秒後に一度だけメッセージを表示する
setTimeout(() => {
console.log('3秒経過しました');
}, 3000);
一方、setIntervalは止めるまでずっと繰り返し実行されるという点を
違いとして覚えておきましょう。
setIntervalを使う際の注意点
setIntervalを使用する際にはいくつかの注意点があります。
主な点はちゃんとclearIntervalしないと永久に止まらないよ、ということですが、
もっと詳しく言うのであれば、解除しないとメモリリークの原因になります。
それらも含めてsetIntervalを使用する際に注意点は以下のようなものがあります。
過剰な実行頻度
短い間隔で頻繁に実行すると、ブラウザやシステムの負荷が高くなります。必要以上に短い間隔は避けましょう。
正確性の問題
JavaScriptのシングルスレッド特性上、setIntervalの実行タイミングがずれることがあります。特に、重い処理が行われている場合、遅延が発生することがあります。
リソースの解放
タイマーを使い終わったら必ずclearIntervalで解除しましょう。
setIntervalの使いどころ
どんなところで使えばいいの？という話を最後にしておきます。
setIntervalは以下のような場合に有効です。
リアルタイムな更新
時計やタイマーを表示する際に、一定間隔で表示を更新する際に使えます。
ただし、正確な時計が必要な場合はsetIntervalだけでの解決は向いてないかもしれません。
一定間隔でデータや状態を確認するとき
サーバーからのデータ取得を一定間隔で試みるときや、
画面上に特定の要素が表示されたかどうかを判定するのに使用してもいいでしょう。
ただし、Promiseやaync/awaitなどのような「取得できたら次の処理を行う」という機能が別にあるので、
このあたりは使い分けに気を付けた方がいいでしょう。
まとめ
setIntervalは指定した間隔で半永久的に（clearIntervalするまで）処理を繰り返す
setIntervalを理解して適宜使えるようになっていきましょう～
あざした
