【JavaScript】途中で停止、再開を自由に設定する方法【setInterval】

という方向けのご紹介です。

執筆者

・独学でキルミーベイベーのゲームを作っている男
・javascriptが大好きな男

setIntervalってなに?

「セット インターバル」は名前の通り、決められた間隔で処理を行うメソッドのこと
下記の文法で簡単に動かすことができます。

大変便利なのですが、一度開始すると永久に処理を続けるというデメリットがあります。そこで今回は、、

こちら2つをご紹介致します。
コピペできるコードも載せておりますので、ご活用下さい。

setIntervalの停止方法

停止方法ですが、専用のメソッド clearInterval()が用意されております。
こちらをご覧ください。

2秒づつメッセージが変化した後、処理が止まりましたね。

clearIntervalにIDを渡す

ポイントはsetIntervalは発動するとIDを発行する点です。

const timer = null;
ーーーーーーーーーーーーーーーーーーーーーー
timer = setInterval(showMessage, 2000);
ーーーーーーーーーーーーーーーーーーーーーー
if (i == 3) {
　　clearInterval(timer)
}

↑は必要部分だけ抜粋したもの。clearIntervalを使うには

の順番が最も分かりやすいと思います。

setIntervalの処理を再開させる方法

調べて限り、今時点(2023/05)で停止させたsetIntervalをピンポイントで再開させるメソッドは実装されていません…

しかしながら、少し工夫すればシンプルなコードで実現させることができます！

条件式でsetInterval、cleraIntervalを制御しよう！

まず、完成品をご覧ください。

ボタンを押す、押さないでメッセージ変更処理を自由に決めることができます。
ポイントはsetInterval、cleraIntervalを1つの条件式にいれてしまう点です。

抜粋してみましょう。

let btnFlag = 0;

function changeBtn(){
　if (btnFlag == 0) {
　　btnFlag = 1;
　　btn.textContent = '再開するよ！';
　　btn.style.backgroundColor = 'blue';
　　clearInterval(setIntervalId);
　} else {
　　btnFlag = 0;
　　btn.textContent = '停止するよ！';
　　btn.style.backgroundColor = 'green';
　　setIntervalId = setInterval(showMessage, 2500);
　　} 
　}
}

関数changeBtn()はボタンを押すと発動します。
「btnFlag」でif文の処理を分けており、「０」⇔「1」を押した瞬間に区別して処理するようになっています。

簡単にクリックイベントを登録しちゃおう！

上で紹介した関数を使った方法、アロー関数で書くこともできます。
しかし、今回は分かりやすさ重視でonclickメソッドを使用しました。

btn.onclick = changeBtn;

たった一文でクリックイベントを登録できるので、setIntervalや「ボタンを押したら〇〇の処理をはじめる」とは相性がよいと思います。

こちらで詳しく解説しておりますので、興味のある方はご活用ください。

要素をクリックした時に処理を開始する方法【clickイベント】

まとめ

最後に、setIntervalの基本文法をまとめておきます。