javascriptでストップウォッチ。timeStampの取得タイミングがわからない。

Question

javascriptでストップウォッチを作成したいです。

以下、大まかな仕組みです。

htmlにstartボタンを設置しトグルにしています。1度目のクリックでrunになり、2度目でstopになります。3度目で再度runになり、4度目でstopになります。

1度目のクリックでperformance.now()でtimeStampを取得し、2度目でもperformance.now()でtimeStampを取得し、この差分を求めます。3度目と4度目でも同様に差分を求めます。
この2つの差分を合算し累積値とします。

変数名についてです。
1度目と3度目のクリック時にstartTimeを取得、2度目と4度目でstopTime取得です。
accumを累積値とします。

以下、大体のコードです。
```ここに言語を入力
<button id="start">
start
</button>
<span id="display">00:00:00:00</span>

<script>

let startButton = document.getElementById("start");
let display = document.getElementById("display");
let mode = "stop";
let interval_1;
let startTime;//runされたときのtimeStamp保存用の変数
let stopTime;//runとstopの差分保存用の変数
let accum;//累積値

startButton.addEventListener("click" , function()
{
switch(mode)
{
case "stop":
mode = "run";
interval_1 = setInterval(update ,50);
break;
case "run":
mode ="stop";
clearInterval(interval_1);
break;
}
});

function update()
{
accum = ;
display.textContent = accum;
}

ここから分からない点です。
accumをdisplayにセットすればいいわけで、差分もstopTime - startTimeで求められます。ただ、4度あるクリックのタイミングに、どうやって処理を組み込めばいいのかわからないのです。
performance.now()でタイムスタンプを取得しますが、その組み込み方がわからないです。

この点についてサンプルとなるコードを教えてもらえませんか？

Answer 1

ボタンをクリックするたびに停止・再開を繰り返す形でコードを修正してみました。
時間表示のフォーマットは合わせていません。

let startButton = document.getElementById("start");
let display = document.getElementById("display");
let mode = "stop";
let interval_1;
let startTime;//runされたときのtimeStamp保存用の変数
let accum = 0;//累積値

startButton.addEventListener("click" , function()
{
	switch(mode)
	{
		case "stop":
			mode = "run";
			startTime = performance.now();
			interval_1 = setInterval(update ,50);
			break;
		case "run":
			mode ="stop";
			accum = accum + performance.now() - startTime;
			clearInterval(interval_1);
			break;
	}
});

function update()
{
	display.textContent = accum + performance.now() - startTime;
}

Comments

[blendegg]

返答遅れました。
ありがとうございます。参考にさせてもらいます。
必要な処理自体はぼんやり分かるんですが、実行タイミングまだよく分かっていません。