スポンサーリンク

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

javascript
「setIntervalの処理を、途中で停止とか再開とかできないの?」

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

setInterval とは

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

setInterval(■■,△△)

■■:処理したい関数名
△△:処理する間隔(1000=1秒)

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

①setIntervalの停止方法
②setIntervalの処理を再開させる方法

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

setIntervalの停止方法

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

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

clearIntervalにIDを渡す

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

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

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

①setIntervalを変数(定数)に格納
②setIntervalを止めたい条件をif文で設定
③clearInterval(〇〇)で処理を止める

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

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

調べて限り、今時点(2024/7月)で停止させた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文の処理を分けており、「0」⇔「1」を押した瞬間に区別して処理するようになっています。

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

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

btn.onclick = changeBtn;

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

まとめ

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

setInterval(■■,△△)

■■:処理したい関数名
△△:処理する間隔(1000=1秒)

以上、JavaScriptでsetIntervalの停止、再開する方法のご紹介でした。

setIntervalは使いやすいプロパティの為、応用できる場面がたくさんあります。
また、当サイトでは初学者向けにゲームの作り方を紹介しております。

【JavaScript】リバーシ(オセロ)の作り方を初学者向けに1行づつ解説!①【ゲーム】

ゲームを作るのはとても勉強になりますし、モチベーション維持にもつながります。
興味があればご活用ください。