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

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

概要

定周期処理を行うsetInterval()、
タイマーを停止したい！って場合ありますよね。
その時は、clearInterval()メソッドを使用します。

サンプルコード

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

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

• html

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

• JavaScript

const intervalId = setInterval(() => {
    console.log('interval!')
}, 1000)

function stopSetInterval() {
    console.log(`stop setInterval! ID=${intervalId}`)
    clearInterval(intervalId)
}

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

interval!
interval!
interval!

指定時間が経過するたびにログが出力されます。

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

interval!
stop setInterval! ID=1

ボタン押下後はinterval!ログが出力されなくなります。
タイマーが停止されたことがわかります。

以上です。