setIntervalメソッドとsetTimeoutメソッドの違い

一定時間が経過したら処理を実行する2つのメソッド

setTimeoutメソッドとsetIntervalメソッドはいずれも指定した時間が経過すると処理を実行することができます。

この2つのメソッドは指定した処理を実行する回数が「単発」か「繰り返し」かの違いがあります。
setTimeoutメソッドは処理を1度だけ実行する単発なのに対して、setIntervalメソッドは定期的に処理を繰り返します。

そのため、指定した処理を実行したい回数や頻度から、どちらのメソッドを使うか判断することができます。

2つのメソッドはパラメータが共通していて第1パラメータは実行したい関数（処理）、第2パラメータに時間（タイマー）、第3パラメータに関数に渡す引数（任意）を指定することができます。
第2パラメータの時間はミリ秒単位で指定することができ、例えば1秒なら「1000」を指定します。

以降はそれぞれのメソッドを使用例から基本的な使い方を解説していきます。

setIntervalメソッドの基本的な使い方

setIntervalメソッドは指定した処理を定期的に実行することができます。
定期処理はclearIntervalメソッドを使って停止するか、ページを閉じない限りずっと繰り返します。

以下の例は、ページの読み込みが完了したタイミングでsetIntervalメソッドを実行し、タイマーと実行する処理を設定します。
タイマーでは1秒ごとに変数countの内容をコンソールに出力しながら値を1ずつ足していき、値が10になるまで処理を繰り返します。

JavaScript コード例

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

  let count = 0;
  let interval_id = null;

  interval_id = setInterval(() => {

    if( count < 10 ) {

      console.log((count+1) + "回目");
      count++;

    } else {
      clearInterval(interval_id);
    }

  }, 1000);

});

このコードを実行すると、以下のようにメッセージが10回コンソールに出力されます。

コンソール出力例

// 1回目
// 2回目
// 3回目
// 4回目
// 5回目
// 6回目
// 7回目
// 8回目
// 9回目
// 10回目

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

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

setTimeoutメソッドの基本的な使い方

setTimeoutメソッドを実行して、指定した処理を1度だけ実行します。
setIntervalメソッドのように定期処理が延々と実行されることはありませんが、clearTimeoutメソッドを使って停止をキャンセルすることも可能です。

以下の例はページ読み込みが完了してからsetTimeoutメソッドを実行して3秒後に指定した処理を実行するように設定します。
ページ上のキャンセルボタンが押されずに3秒経過したら予定通り処理を実行します。
もし3秒以内にキャンセルボタンが押されたとき（クリックされたとき）はclearTimeoutメソッドを実行して処理をキャンセルし、さらにコンソールへ「キャンセルしました」と出力して終了します。

HTML コード例

<button id="btn_cancel">キャンセル</button>

JavaScript コード例

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

  const btn_cancel = document.getElementById('btn_cancel');
  let timeout_id = null;

  timeout_id = setTimeout(() => {
    console.log('Hello');
  }, 3000);

  btn_cancel.addEventListener('click', () => {
    clearTimeout(timeout_id);
    console.log('キャンセルしました');
  });

});

キャンセルボタンのHTML要素はid属性をdocument.getElementByIdメソッドに指定して取得します。
その後、addEventListenerメソッドでクリックされたときに発生するイベント「click」を検出できるよう登録しておきます。

キャンセルボタンが押されると、まずclearTimeoutメソッドを実行してsetTimeoutメソッドで設定した処理をキャンセルします。
パラメータに変数timeout_idを渡すところがポイントです。

その後にコンソールへ「キャンセルしました」と出力して処理は終了します。

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

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