現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

タイマー

【JavaScript入門】setIntervalとclearIntervalの使い方|一定間隔で処理を繰り返すタイマーの基本

投稿日:2019年7月3日 更新日:

JavaScriptのsetInterval・clearIntervalとは?一定間隔で処理を繰り返すタイマーの使い方

setInterval() は、指定した時間ごとに繰り返し処理を実行するためのメソッドです。
また、clearInterval() を使うことで、設定したタイマーを停止できます。

時間はミリ秒(1秒=1000ミリ秒)で指定します。



setIntervalメソッドとは?

setInterval() は、指定した間隔で関数を繰り返し実行します。
停止しない限り、永続的に処理が続きます。

書式:

タイマーID = setInterval(実行する関数, 指定時間ミリ秒);

使用例:0.5秒ごとに関数を実行

timer2 = setInterval(“msg()”, 500);

→ 0.5秒(500ミリ秒)ごとに msg() が繰り返し実行されます。



clearIntervalメソッドとは?

clearInterval() は、setInterval() で設定したタイマーを停止するメソッドです。

タイマーを解除するには、setInterval() の戻り値(タイマーID)を変数に保存しておく必要があります。

使用例:設定したタイマーを解除

clearInterval(timer2);

timer2 に設定された繰り返し処理が停止します。

実際のサンプル:カウントアップタイマー

<script>
let count = 0;
let timer;

function startCount() {
  timer = setInterval(() => {
    count++;
    document.getElementById(‘num’).textContent = count;
  }, 1000);
}

function stopCount() {
  clearInterval(timer);
}
</script>

<div>カウント:<span id=”num”>0</span></div>
<button onclick=”startCount()”>開始</button>
<button onclick=”stopCount()”>停止</button>

→ 1秒ごとにカウントが増え、停止ボタンで止められます。



setIntervalとclearIntervalのポイント

  • setInterval() は指定時間ごとに繰り返し実行
  • 停止しない限り永続的に動作する
  • clearInterval() でタイマーを解除可能
  • タイマーIDを変数に保存しておく必要がある

関連リンク

-タイマー
-

執筆者:

関連記事

【JavaScript入門】setTimeoutとclearTimeoutの使い方|指定時間後に処理を実行するタイマーの基本

JavaScriptのsetTimeout・clearTimeoutとは?指定時間後に処理を実行するタイマーの使い方 setTimeout() は、指定した時間が経過した後に一度だけ処理を実行するため …