setInterval()

セットインターバル（非同期処理）

意味指定時間ごとに関数を繰り返し実行

setInterval()とは？

setInterval()は、指定した時間間隔で関数を繰り返し実行するためのメソッドです。

setInterval()の具体的な使い方

タイマーの作成

<div id="timer">0</div>
<button onclick="startTimer()">開始</button>
<button onclick="stopTimer()">停止</button>

<script>
let seconds = 0;
let intervalId;

function startTimer() {
  if (!intervalId) {
    intervalId = setInterval(() => {
      seconds++;
      document.getElementById('timer').textContent = seconds;
    }, 1000);
  }
}

function stopTimer() {
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  }
}
</script>

setIntervalを使用して、1秒ごとにカウントアップするタイマーを作成します。開始ボタンでタイマーを開始し、停止ボタンで一時停止することができます。

自動停止機能付きのカウントダウン

function countdown(seconds) {
  const intervalId = setInterval(() => {
    console.log(seconds);
    seconds--;
    
    if (seconds < 0) {
      clearInterval(intervalId);
      console.log('カウントダウン終了！');
    }
  }, 1000);
}

countdown(5);

👇出力結果

5
4
3
2
1
0
カウントダウン終了！

指定された秒数からカウントダウンし、0になると自動的に停止する関数です。setIntervalとclearIntervalを組み合わせて使用しています。

setInterval()に関するよくある質問

Q. setIntervalの実行間隔は正確ですか？

A. setInterval()の実行間隔も必ずしも正確ではありません。指定した間隔は最小待機時間であり、実際の間隔はJavaScriptの実行環境や他の処理の状況によって変動する可能性があります。

Q. setIntervalを途中で止めるには？

A. clearInterval()関数を使用して停止できます。setInterval()が返すIDをclearInterval()に渡すことで、繰り返し処理を停止できます。

Q. setTimeoutとの違いは何ですか？

A. setTimeoutは指定時間後に1回だけ関数を実行しますが、setIntervalは指定間隔で繰り返し関数を実行します。setTimeoutは一度きりの遅延実行、setIntervalは定期的な実行に使用します。

setInterval()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのsetInterval()やイベントループ、then()、非同期イテレータ、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。