【JavaScript入門】指定した時間毎に処理を実行するsetIntervalメソッドの使い方

一定時間毎に処理を繰り返したい場合はsetIntervalメソッドを使用します。

setIntervalの使い方
setIntervalの実行順序

目次へ

`setInterval`の使い方

書式

setInterval(実行したい処理,何秒毎に実行するかをミリ秒で指定)
例えば、3秒毎に実行したい場合は以下のように記述します。
setInterval(func,3000)

以下のサンプルでは、「スタート」ボタンを押下すると3秒毎に「3秒経過しました。」と表示されます。この処理を止めたい場合は「キャンセル」ボタンを押下します。

See the Pen
setInterval by shiakisudev (@shiakisu)
on CodePen.

以下はサンプルコードです。

HTML

<button id="start">スタート</button>
<button id="cansel">キャンセル</button>
<div id="result"></div>

document.addEventListener('DOMContentLoaded',function(){
  //タイマーID
  let timerID;

  //「スタート」ボタン押下時に呼び出される関数。
  function start(){

    function print(){

      document.getElementById('result').innerHTML += '3秒経過しました。<br>';
    }

    //3秒毎にprint()を実行。
    timerID = setInterval(print,3000);

  }

   //「キャンセル」ボタン押下時に呼び出される関数。
  function cansel(){
    //タイマーを終了する。
    window.clearInterval(timerID);
    //キャンセルした旨を画面に表示する。
    document.getElementById('result').innerHTML += "キャンセルされました。<br>";
  }

  //イベントリスナー登録（スタート）
  document.getElementById('start').addEventListener('click',start,false);

  //イベントリスナー登録（キャンセル）
  document.getElementById('cansel').addEventListener('click',cansel,false);
},false);

`setInterval`の実行順序

setIntervalを使う上で1つ気をつけておきたいのがsetIntervalで指定した処理は3秒毎に実行してくれますが、後続の処理はそれとは関係なく実行されるということです。
以下のサンプルでは、「スタート」ボタンを押下すると①「ここはsetIntervalよりも前の行です。」②「ここはsetIntervalよりも後ろの行です。」③「3秒経過しました。」の順で画面に表示されることが確認できます。

See the Pen
setInterval2 by shiakisudev (@shiakisu)
on CodePen.

HTML

<button id="start">スタート</button>
<button id="cansel">キャンセル</button>
<div id="result"></div>

document.addEventListener('DOMContentLoaded',function(){
  //タイマーID
  let timerID;

  //「スタート」ボタン押下時に呼び出される関数。
  function start(){

    document.getElementById('result').innerHTML += 'ここはsetIntervalよりも前の行です。<br>';

    function print(){

      document.getElementById('result').innerHTML += '3秒経過しました。<br>';
    }

    //3秒毎にprint()を実行。
    timerID = setInterval(print,3000);

    document.getElementById('result').innerHTML += 'ここはsetIntervalよりも後ろの行です。<br>';

  }

   //「キャンセル」ボタン押下時に呼び出される関数。
  function cansel(){
    //タイマーを終了する。
    window.clearInterval(timerID);
    //キャンセルした旨を画面に表示する。
    document.getElementById('result').innerHTML += "キャンセルされました。<br>";
  }

  //イベントリスナー登録（スタート）
  document.getElementById('start').addEventListener('click',start,false);

  //イベントリスナー登録（キャンセル）
  document.getElementById('cansel').addEventListener('click',cansel,false);
},false);