今回は、JavaScriptで時間を扱うときによく使われる、setInterval と setTimeout について学びました。
setInterval / clearInterval とは？
～Crebitテキストより～
setIntervalは、一定の間隔ごとに同じ処理を繰り返すための関数です。
基本の書き方は以下の通りです。
setInterval(関数, 間隔のミリ秒)
setInterval自体が「関数」で、
( )の中に、以下の2つを引数として渡します。
１．実行したい関数
２．間隔（ミリ秒）
例えば、
setInterval(関数, 1000);
と書くと、1000ミリ秒（1秒）ごとに関数が実行されます。
setIntervalは読み込まれてから、止めない限り繰り返し実行され続けるのが特徴です。
処理を止めたい場合は、clearIntervalを使います。
どんな場面で使うの？
setIntervalは、次のような場面で使われます。
①カウントダウン・タイマー
（試験時間、ゲーム、セール終了表示など）
②時計表示（現在時刻）
（デジタル時計、ステータス表示）
③アニメーション・動きの制御
（要素を少しずつ動かす）
④定期的なデータ更新
（チャット、通知、株価・スコア更新）
setTimeoutとの違い
setIntervalに似ている関数で、setTimeoutがあります。
setTimeoutは、指定した時間が経過した後に一度だけ処理を実行する関数です。
一方、setIntervalは、指定した時間ごとに何度も処理を繰り返します。
用途によって、どちらを使うかを選ぶことが大切です。
まとめ
・ setIntervalは 止めないと永遠に動く
・ clearIntervalを使うことで処理を止められる
・タイマーや定期的な更新処理でよく使われる
・一度だけ実行したい場合はsetTimeout
実際に使ってみて、タイマー系の処理の理解を深めていきたいです。
参考文献
・TECH PLAY JavaScriptのsetTimeoutとsetIntervalを理解しマスターする
https://techplay.jp/column/548 2026年2月7日アクセス