ywork2020.com

Title

インターバルを削除する

目次 (INDEX)

window とは

ここで説明する window とは次の語句からなる JavaScript のグローバル変数であり、Window オブジェクトを参照します。
window
読み: ウィンドウ
意味: 窓

clearInterval とは

ここで説明する clearInterval とは次の語句からなる JavaScript のメソッドです。
clear
読み: クリア
意味: きれい、澄んだ、晴れた、消え去る
interval
読み: インターバル
意味: 間、時間、時間の間隔、合間

目次に戻る

window.clearInterval メソッドの概要

このメソッドは、引数に与えた interval ID をもつインターバルを削除します。

具体的にいうと、これは setInterval() によって作成された interval ID を削除します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

window.clearInterval(intervalID);
  • intervalID: このインターバル ID 値を持つインターバルを削除します。

目次に戻る

サンプルコードと実行結果

ここでは、setInterval() で関数を繰り返し呼び出す方法と、その関数を clearInterval() で削除するサンプルを見て下さい。

サンプルコード: HTML
<body>
	<p>
		スタート : <button onclick="funcStratCount()" id="idStrat"> スタート </button>
	</p>
	<p>
		カウント : <output id="idOutput"> 0 </output> 秒
	</p>
	<p>
		ストップ : <button onclick="funcStopCount()"> ストップ </button>
	</p>
	<script>...</script>
</body>
  • 03: button onclick="funcStratCount()" (このボタンをクリックすると funcStratCount() 関数を呼び出します。)
  • 06: output id="idOutput" (この要素にカウントを出力します。)
  • 09: button onclick="funcStopCount()" (このボタンをクリックすると funcStopCount() 関数を呼び出します。)
サンプルコード: script
<script>
	let intCount = 0;
	let elmStrat = document.getElementById("idStrat");
	let elmOutput = document.getElementById("idOutput");
	let msDelay = 1000;
	function funcShowCount(){
		elmOutput.innerText = ++intCount;
	}
	function funcStopCount(){
		window.clearInterval(intervalId);
		elmStrat.disabled = false;
	}
	function funcStratCount(){
		intervalId = window.setInterval(funcShowCount, msDelay);
		elmStrat.disabled = true;
	}
</script>
  • 10: window.clearInterval(intervalId) (clearInterval() は引数に与えた識別子のインターバルを削除します。)
  • 14: intervalId = window.setInterval() (funcStratCount() 関数内で setInterval() を実行しています。これにより 一定の遅延間隔毎に funcShowCount 関数を呼び出します。)
実行結果:

スタート :

カウント : 0

ストップ :

目次に戻る