ストップウォッチ作成の考え方について

Question

performance.now()で現在のタイムスタンプを取得し、スタートボタンを押したときとの差分を求め、その差分を累積時間に加算していくことでストップウォッチが作れると思います。

<div id="timer"></div>
<button id="button"></button>

<script>
let accumTime = 0;//累積時間
let startTime = 1000;//スタートさせる時間を1000msと仮定
let timer = document.getElementById("timer");
let button = document.getElementById("button");

button.addEventListener("click" , function()
{
update();
});

function update()
{
accumTime += (performance.now() - startTime);
timer.textContent = accumTime;
}
</script>

しかしここで疑問があります。accumTimeに加算していくと、１秒ごとに以下のように数値が雪だるま式に増えていきますから、おかしいです。

accutime =0 + 1100 - 1000//accumTime = 100
accutime =100 + 1200 - 1000//accumTime = 300
accutime =200 + 1300 - 1000//accumTime = 500
accutime =300 + 1400 - 1000//accumTime = 700

そこでupdate関数内を変更すると期待した動作になります。

function update()
{
timer.textContent = accumTime + (performance.now() - startTime);
}

しかし、２つのupdate関数の違いがわかりません。
1つめは加算代入だから、雪だるま式に増えるということですよね。しかし、２つ目も加算代入と思うんですが、違いを教えていただけますか？

以下、修正したコードです

ボタンを押すとタイマーが作動し、もう１度押すとストップします。トグルを追加しました。

<div id="timer">0</div>
<button id="button">ぼたん</button>

<script>
let accumTime = 0;//累積時間
let startTime =0;
let timer = document.getElementById("timer");
let button = document.getElementById("button");
let toggle = "stop";
let interval_id;

button.addEventListener("click" , function()
{
	switch(toggle)
	{
		case "stop":
			interval_id = setInterval(update , 100);
			toggle = "run";
			break;
		case "run":
			clearInterval(interval_id);
			toggle = "stop";
			break;
	}

});

function update()
{
accumTime += (performance.now() - startTime);
timer.textContent = accumTime;
}
</script>

Comments

[int32_t]

<button id="button"> を押すたびに計測開始と終了を繰り返す挙動をしたい、で合ってますか?

[yambejp]

仕様があいまいです
ボタンを一度おすとstartしてもう一度おすとstop？
その時間差を表示するという感じですか？
その間の経過時間の表示などは不要？

[blendegg]

ボタンを押すとタイマーがスタートし、もう１度押すとストップします。修正コードを追加しました。
申し訳ありません。

Answer 1

startTimeが計測を開始した時刻だとすると、質問文に書いてあるとおり毎秒呼ばれる update() 内で accumTime を更新してはダメです。修正後の update() が期待どおりの動作で、タイマーを止めるときに accumTime への加算を行えば良いです。

Comments

[blendegg]

やっとある程度理解できました。
回答がおそくなりすみません。ありがとうございました。

Answer 2

前者は可算結果をaccumTimeに代入していますが、後者は代入していませんのでaccumTimeの値は変わらず0のままです。

つまり、timer.textContent = performance.now() - startTime;と実質的に変わらないと思います。

Comments

[blendegg]

そうしますと、途中からの再スタートが出来ないですね(例えば累積が1000msまで溜まった状態から、再加算)。
どのようにすれば雪だるま式を防ぎつつ、accumTimeに加算出来るでしょうか？

[Lhankor_Mhy]

そう言われましても、「途中からの再スタート」について、私が回答した時点でのご質問から読み取れることはなかったと思いますが……
update()関数が毎秒呼ばれることも書いてなかったと思います。
（update はラップタイムを書くためのメソッドだと思っていました）

そもそも、当初のご質問は「違いを教えていただけますか？」であり、不具合の解決についてのご質問ではなかったと理解していますが、合っていますでしょうか？
（質問を変更してはいけない、という話ではないです。当方では認識しえなかった、という話です）

編集された新しいご質問のコードを拝読しました。
int32_t さんのご回答の通りでいいと思いますよ。