https://idea-hack.com/courses/lets-learn-the-timing-to-control-the-processing-timing-with-javascript/lessons/how-to-use-settimeout-method-to-process-after-a-certain-time-in-javascript-2/
https://idea-hack.com/courses/lets-learn-the-timing-to-control-the-processing-timing-with-javascript/lessons/how-to-use-settimeout-method-to-process-after-a-certain-time-in-javascript-2/

JavaScriptで一定時間後に行う予定の処理を解除するclearTimeout()メソッドの使い方

JavaScriptで一定時間後に行う予定だった処理を解除したい

JavaScriptで一定時間後に行うとていだった処理を解除するにはclearTimeout()メソッドを使用します。

メソッド

メソッド意味返り値
clearTimeout(タイマーID)setTimeout()メソッドで登録した処理をキャンセルするなし
clearTimeout()メソッドの仕様

サンプルコード

サンプルコードとして、setTimeout()メソッドで「5秒後に今日の日付を出力する」タイマー処理を定義した上で、それを解除させることで、結果的には処理が何も行われないサンプルコードを紹介します。

注意点として、clearTimeout()メソッドを使うには、予めsetTimeout()メソッドで定義された処理に任意のIDが指定されている必要があります。

つまり、処理自体を変数に格納しておくことが必要です。

Output
今日の日付と時刻を取得
Pug
div
		table.table
			tbody
				tr
					th 今日の日付と時刻を取得
					td#targetText
JavaScript
const targetText = document.getElementById( 'targetText' );

//SetTimeoutを定義
//targetTimeIDに処理を格納しておくことで、あとでclearTimeout()を実行できる
const targetTimeID = setTimeout( () => {
	const DateInstance = new Date();
	targetText.textContent = DateInstance.toLocaleString();
}, 5000 );

clearTimeout( targetTimeID );
インストラクター