【JavaScript】setIntervalを停止させたり再開させる方法・コード例

JavaScriptのsetInterval関数において…

途中で処理を停止させたい、
処理の停止・再開を切り替えたい

こういった方法は工夫すれば簡単にできます。

ということで何か役に立つかもしれないので、
JavaScriptのsetInterval()の停止・再開を解説！！

このページの目次

setIntervalを停止させる方法は簡単！
setIntervalを任意で停止・再開させるやり方
ちなみにsetIntervalはnode.jsでも使える普遍的な関数
停止させるのは簡単だが再開は工夫が必要

setIntervalを停止させる方法は簡単！

まずは停止だけさせる方法について

それは clearInterval() を使えばいいだけです。

▼ MDNでの setInterval() の説明

setInterval() メソッドは Window および Worker メソッドで提供され、一定の遅延間隔を置いて関数やコードスニペットを繰り返し呼び出します。このメソッド、インターバルを一意に識別するインターバル ID を返します。よって clearInterval() を呼び出して、後でインターバルを削除できます。

引用元　：　https://developer.mozilla.org/ja/docs/Web/API/setInterval

この説明にある通り、 setInterval() は実行したら実行しっぱなしではなくインターバルIDなるものを返してくれます。これを clearInterval() に渡すとタイマーを止められるわけです。

以下に簡単なコード例を示します

▼ すごく簡単なコード例

let counter = 0
const timerId = setInterval(function(){
  console.log('100回後に死ぬ処理')
  if(++counter > 99){ 
    clearInterval(timerId)
  }
}, 100)

let counter = 0

const timerId = setInterval(function(){

console.log('100回後に死ぬ処理')

if(++counter > 99){

clearInterval(timerId)

}

}, 100)

▼ このコードでやっていること

処理を100ミリ秒間隔で呼び出し
100回を越えたら定期実行停止

ちなみに setIntervalで実行する処理が実行間隔（ここでは100ミリ秒）より長い場合、次の実行は現在の実行が終わるのを待たずに実行されるようです。

setIntervalを任意で停止・再開させるやり方

これは工夫するしかないです。

だって再開させる関数は用意されてないから

例えば次の条件でやりたいとしましょう。

100ミリ秒間隔でなにか処理をしたい
停止ボタンを押したら処理を一時停止
最下位ボタンを押したら処理を再開

面倒だけど一工夫すればできます。次のように

▼ 停止・再開ボタンのHTML

<button id="btnPause">
停止する
</button>
<button id="btnResume">
再開する
</button>

停止する

</button>

再開する

</button>

▼ setIntervalの実行コード例

let paused = false
const timerId = setInterval(function(){
  if(paused){ 
    console.log('処理を一時停止')
    return 
  }
  
  console.log('ただいま実行中')
}, 1000)

document.getElementById('btnPause').onclick 
= function(){
  paused = true
}
document.getElementById('btnResume').onclick 
= function(){
  paused = false
}