JavaScriptで一定時間ごとに繰り返される処理を解除するclearInterval()メソッドの使い方

一定時間ごとに繰り返される処理を解除するclearInterval()メソッド

JavaScriptで一定時間ごとに繰り返されている処理を解除するにはclearInterval()メソッドを利用する必要があります。

メソッド

メソッド意味返り値
clearInterval(インターバルID)setInterval()メソッドで登録した呼び出しをキャンセルするなし
clearInterval()メソッドの仕様

サンプルコード

サンプルコードとして、処理が途中で止まってしまうカウントダウンタイマーを作成したいと思います。

このコードでは元々20秒から0秒までのカウントダウンを行うはずでしたが、10秒の時に繰り返し処理を停止させるため、カウントダウンが正常に終了しないようになります。

Output
残り時間
Pug
table.table
			tbody
				tr
					th 残り時間
					td#targetText
JavaScript
const targetText = document.getElementById("targetText");

const totalTime = 20000; // ミリ秒で20秒を示す
const oldTime = Date.now();

let countdownTimerExcuteCount = 0;//countdownTimerの実行回数を数える

const countdownTimer = setInterval(() => {
	const currentTime = Date.now();
	const diffTime = currentTime - oldTime;
	const remainTime = Math.ceil((totalTime - diffTime) / 1000);
	if ( remainTime <= 0 ) {
		targetText.textContent = `0秒になりました。`;
		clearInterval( countdownTimer );
	} else {
		targetText.textContent = `残り${remainTime}`;
	}
	
	countdownTimerExcuteCount += 1; //繰り返し処理が実行された回数を記録
	if ( countdownTimerExcuteCount === 10 ) { //繰り返し処理された回数が10回目の時に繰り返し処理を停止
		clearInterval(countdownTimer)
	}
}, 1000);

インストラクター