【JavaScript】setInterval()・setTimeout()を解除する方法

JavaScriptでは、一定時間ごとに処理を繰り返すことができるsetIntervalメソッドや、一定時間後に処理を行うsetTimeoutメソッドがあります。

今回は、それらsetInterval、setTimeoutメソッドを解除する方法となります。

【JavaScript】setInterval()を解除する例

以下の例では、idの値にstartをもつ要素をクリックすると、setIntervalメソッドを実行し、繰り返し処理を開始します。

そして、idの値にstopをもつ要素をクリックすると、setIntervalメソッドの繰り返し処理を解除します。

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

	// setIntervalメソッドの戻り値をセットする変数
	var intervalId;

	// setIntervalメソッドを実行し、繰り返し処理を開始する関数
	function startInterval() {
		intervalId = setInterval(function() {
			// 実行させる処理を記述

		}, 1000);
	}

	// setIntervalメソッドの繰り返し処理を解除する関数
	function stopInterval() {
		clearInterval(intervalId);
	}

	document.getElementById('start').addEventListener('click', startInterval, false);
	document.getElementById('stop').addEventListener('click', stopInterval, false);
}, false);

startIntervalメソッドは実行すると、戻り値としてintervalIDを返します。

そのintervalIDは、作成した繰り返し処理を識別する正の整数となり、その値をclearIntervalメソッドの引数に指定することにより、指定した繰り返し処理を解除できます。

setTimeout()の場合

上記の例はstartIntervalメソッドでしたが、setTimeoutメソッドの場合、実行するとtimeoutID を返します。

そのtimeoutIDは、作成したタイマー処理を識別する正の整数となり、その値をclearTimeoutメソッドの引数に指定することにより、指定したタイマー処理を解除できます。

setInterval()とsetTimeout()の戻り値について

また、戻り値のintervalIDとtimeoutIDは、同じプールから割り振られます。また、clearIntervalメソッドとclearTimeoutメソッドは入れ替えて使用することもできます。