【JavaScript】setTimeoutタイマー処理を停止する(clearTimeout)

こんにちは。
本日はJavaScriptメモです。

概要

タイマー処理を行うメソッドといえば
setTimeout()ですね。
タイマー処理開始したものの、
タイマーを停止したい！って場合ありますよね。
その時は、clearTimeout()メソッドを使用します。

サンプルコード

setTimeout()は、IDなるものを返します。
このIDは正の整数値で、
このIDをclearTimeout()に渡すことでタイマーを停止することができます。

以下のサンプルは、
画面表示時にタイマーを開始し、
ボタンで停止できるようにしています。

• html

<input type="button" value="STOP" onclick="stopSetTimeout()">

• JavaScript

const timeoutId = setTimeout(() => {
    console.log('hello world!')
}, 5000)

function stopSetTimeout() {
    console.log(`stop setTimeout! ID=${timeoutId}`)
    clearTimeout(timeoutId)
}

ボタンを押下せず時間経過を待つと
以下のような結果になります。

hello world!

時間が経過してログが出力されました。

ボタンを押下した場合、以下のようになります。

stop setTimeout! ID=1

時間が経過してもhello world!は出力されません。
タイマーが停止されたのがわかりますね。

以上です。