定期的に処理を実行する

一定時間ごとに処理を実行する

一定時間が経過する度に指定した処理を繰り返し実行するときはsetIntervalメソッドを使います。

以下の例は、ページの読み込みが完了してから0.5秒ごとに「Interval type1」、1秒ごとに「Interval type2」、3秒ごとに「Interval type3」とそれぞれコンソールへメッセージを出力します。

JS コード例

window.addEventListener('DOMContentLoaded', function(){
  
  // 0.5秒ごとに実行
  setInterval(() => {
    console.log("Interval type1");
  }, 500);

  // 1秒ごとに実行
  setInterval(() => {
    console.log("Interval type2");
  }, 1000);

  // 3秒ごとに実行
  setInterval(() => {
    console.log("Interval type3");
  }, 3000);

});

setIntervalメソッドは第1パラメータに実行する関数、第2パラメータに何秒ごとに処理を実行するかの時間（タイマー）、第3パラメータに関数に渡す引数（任意）を指定することができます。

第2パラメータのタイマーはミリ秒単位で指定することができ、時間が経過する度に第1パラメータの関数を実行します。
例えば以下のように実行すると、1秒後にコンソールへ第3パラメータで指定した引数を全て出力します。

JS コード例

window.addEventListener('DOMContentLoaded', function(){
  
  setInterval((args) => {
    for(let v of args) {
      console.log(v);
    }
  }, 1000, ["a","b","c"]);

});

第3パラメータの引数は配列形式で値を指定します。
上記のコードでは指定した引数「["a","b","c"]」を、第1パラメータの関数に変数argsへ代入して渡します。
第1パラメータの引数を受け取る変数名は自由に設定でき、第3パラメータの引数も任意なので省略可能です。

setIntervalメソッドは一定時間が経過するごとに繰り返し処理を実行しますが、もし指定した時間が経過したタイミングで1度だけ処理を実行したいときはsetTimeoutメソッドを使います。
詳しくは「一定時間が経過したら処理を実行する」をご覧ください。

設定した処理の繰り返しを停止する

setIntervalメソッドを実行すると、intervalIDが作成されて戻り値になります。
このintervalIDをclearIntervalメソッドにパラメータとして指定してを実行すると、setIntervalメソッドによる定期処理を解除することができます。

以下の例は10から始まるカウントダウンを表示します。
カウントが0まで進むと「終了」のメッセージを表示します。

このコードを動かすサンプルページはこちら

HTML コード例

<article>
  <h1>JavaScriptレシピ</h1>
  <p id="text_number"></p>
</article>

JS コード例

window.addEventListener('DOMContentLoaded', function(){

  let count = 10;
  let interval_id = null;
  const text_number = document.getElementById("text_number");

  interval_id = setInterval(() => {

    if( 0 <= count ) {

      text_number.textContent = count;
      count--;

    } else {
      clearInterval(interval_id);
      text_number.textContent = "終了";
    }

  }, 1000);

});

setIntervalメソッドを実行すると、戻り値のintervalIDが変数interval_idに入ります。
定期処理を実行している間は1秒（1000ミリ秒）ごとに変数countの数値を1ずつ減算します。

変数countの数値が0以下になったら、まずはclearIntervalメソッドを実行して定期処理を解除します。
その後に文字列「終了」をp要素にセットして終了です。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。