【JavaScriptの繰り返し処理】setIntervalとclearIntervalの使い方！

JavaScriptで繰り返し処理を実行したいときによく使うのが、setIntervalです。そして、その繰り返しを止めるためにはclearIntervalを使います。

この記事では、setIntervalとclearIntervalについて、以下の内容をサンプルコードを用いてわかりやすく解説します。

setIntervalとは？
- setIntervalの構文
- setIntervalのサンプルコード
clearIntervalとは？
- clearIntervalの構文
- clearIntervalのサンプルコード
setIntervalとsetTimeoutの違い

setIntervalとは？

setIntervalは、指定した時間ごとに繰り返し処理を実行する関数です。

例えば、

1秒ごとに時計を更新する
3秒ごとにデータを取得する

といった場合に使います。

setIntervalの構文

const intervalId = setInterval(function, delay, arg1, arg2, ...);

function → 実行したい関数または無名関数。最初の実行はdelayミリ秒後に実行される。
delay → 繰り返しの間隔（ミリ秒単位。1000ミリ秒 = 1秒）。指定されなかった場合の既定値は0ミリ秒。
arg1, arg2, ... → 関数に渡す引数（省略可）。
intervalId → 後で停止させるときに使うID（clearIntervalを使う場合に必要）。

setIntervalのサンプルコードを以下に示します。

let count = 0;

setInterval(() => {
  count++;
  console.log(`カウント: ${count}`);
}, 1000);

// ログ ↓
// カウント: 1
// カウント: 2
// カウント: 3
// カウント: 4
// カウント: 5
// ...

上記のサンプルコードでは、1000ミリ秒（1秒）ごとにcountを増やし、console.log(カウント: ${count})を実行しています。

clearIntervalとは？

clearIntervalは、setIntervalで設定した繰り返し処理を止める関数です。setIntervalが返すID（例: intervalId）をclearIntervalに渡すことで、繰り返しをキャンセルすることができます。

clearIntervalの構文

clearInterval(intervalId);

intervalId → setIntervalが返したID

clearIntervalのサンプルコードを以下に示します。

let count = 0;

const intervalId = setInterval(() => {
  count++;
  console.log(`カウント: ${count}`);

  if (count >= 5) {
    clearInterval(intervalId);
    console.log('カウント終了');
  }
}, 1000);

// ログ ↓
// カウント: 1
// カウント: 2
// カウント: 3
// カウント: 4
// カウント: 5
// カウント終了

上記のサンプルコードでは、1000ミリ秒（1秒）にcountが増えていき、5回目でclearIntervalが呼ばれて繰り返しが止まります。

setIntervalとsetTimeoutの違い

setIntervalと似た関数にsetTimeoutがあります。これらの違いは、指定した時間が経過した後に「繰り返し実行するか（setInterval）」「1回だけ実行するか（setTimeout）」という点です。

項目	setInterval	setTimeout
処理の回数	繰り返し実行	1回だけ実行
処理の間隔	毎回一定の間隔で実行	指定時間後に1回だけ実行
停止の方法	`clearInterval(intervalId)`	`clearTimeout(timeoutId)`

setTimeoutのサンプルコードを以下に示します。

setTimeout(() => {
  console.log('1秒後に1回だけ実行されます');
}, 1000);