javascript、setinterval,clearinterval関数と、トグルボタンによるカウントアップを行いたい

１つのボタンにスタートとストップの機能をもたせたいです。
以下のコードの場合はstartボタンがそれに相当します。
startを押すとカウントアップを開始し、もう１度押すとカウントアップを停止します。もう１度押すと、途中から再度カウントアップします。

<div id="timer">00</div>
<div id="start" class="btn">Start</div>
<div id="reset" class="btn">Reset</div>

	<script>
		let start_bt = document.getElementById("start");
		let timer = document.getElementById("timer");

		let mode = false;
		let t = 0;
		let addTimer;
		function startTimer()
		{
			addTimer = setInterval(function()
			{
				t++;
				timer.textContent = t;
			}, 1000);

		}
		
		function stopTimer()
		{
			clearInterval(addTimer)
		}

		test_bt.addEventListener("click" ,   function()
		{
			switch(mode){
				case false: 
					stopTimer();
					console.log("1");
				case true:
					startTimer();
					console.log("2");
			}
			mode = !mode;
			console.log(mode);
		});

しかし、2度め目の押下でカウントアップが止まりませんし、なぜかカウントアップの速度が早くなります。
switchのあたりに問題点がありそうだなと検討はつくのですが、解決出来ませんでした。
どのようにコードを改善すれば良いか、ヒントを頂けますか？

think49

2021/07/11 07:14

前質問で取り上げた「setIntervalの誤差問題」が未解決のコードを使用しているのはなぜでしょう？ https://teratail.com/questions/348048

blendegg

2021/07/11 07:22

それはコードを書いているのが私ですから、同じようなコードになるというだけのことです。

think49

2021/07/11 07:51

前質問の回答を忘れて同じ失敗を繰り返しても良いと考えているのですね…。

kei344

2021/07/11 08:26

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

switch文のcaseにbreakが無いのが原因です。
case false:で止めているのにcase true:の方も実行されているのでタイマが重複して設定されます。

javascript
1<div id="timer">00</div>
2<div id="start" class="btn">Start</div>
3<div id="reset" class="btn">Reset</div>
4
5<script>
6  let start_bt = document.getElementById("start");
7  let timer = document.getElementById("timer");
8
9  // 初期値はスタートする方にしておかないとだめじゃないですか？
10  let mode = true;
11  let t = 0;
12  let addTimer;
13
14  function startTimer() {
15    addTimer = setInterval(function() {
16      t++;
17      timer.textContent = t;
18    }, 1000);
19
20  }
21
22  function stopTimer() {
23    clearInterval(addTimer)
24  }
25
26  // test_btになっていました
27  start_bt.addEventListener("click", function() {
28    switch (mode) {
29      case false:
30        stopTimer();
31        console.log("1");
32        // breakを追加
33        break;
34      case true:
35        startTimer();
36        console.log("2");
37        break;
38    }
39    mode = !mode;
40    console.log(mode);
41  });
42
43</script>
44