Window clearInterval() メソッド

定義と使用方法

clearInterval() メソッドを使用してクリアします： setInterval() メソッド 設定されたタイマー。

ヒント

インターバルをクリアするには、以下の方法を使用してください： setInterval() 返された id：

myInterval = setInterval(function, milliseconds);

その後、以下のコールバックを呼び出して： clearInterval() 実行を停止するために：

clearInterval(myInterval);

も参照してください：

setInterval() メソッド

setTimeout() メソッド

clearTimeout() メソッド

例

例 1

1秒ごとに時間を表示します。setInterval()を使用して時間を停止します：

const myInterval = setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
  document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction() {
  clearInterval(myInterval);
}

自分で試してみてください

例 2

500ミリ秒ごとに2つの背景色の間で切り替わります：

const myInterval = setInterval(setColor, 500);
function setColor() {
  let x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
  clearInterval(myInterval);
}

自分で試してみてください

例 3

setInterval()とclearInterval()を使用してダイナミックなプロセスバーを作成します：

function move() {
  const element = document.getElementById("myBar");
  let width = 0;
  const id = setInterval(frame, 100);
  function frame() {
    if (width == 100) {
      clearInterval(id);
    } else {
      width++;
      element.style.width = width + '%';
    }
  }
}

自分で試してみてください

構文

clearInterval(intervalId)

パラメータ

パラメータ 説明
intervalId 必須。以下から setInterval() 返される間隔 ID。

戻り値

なし。

説明

clearInterval() メソッドは、周期的に実行される指定されたコードを停止し、これらのコードの操作は呼び出し setInterval() メソッド を開始する。パラメータ intervalId は呼び出す setInterval() メソッド の戻り値。

ブラウザのサポート

すべてのブラウザがサポートしています clearInterval()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート サポート サポート サポート サポート サポート