ストップウォッチ
ラップとスプリットタイム、キーボードショートカット、結果一覧のコピーに対応した高精度オンラインストップウォッチ。単調時計を使うため、バックグラウンドタブでもずれません。
ずれないストップウォッチ。 ボタンでもキーボードでも開始・一時停止・ラップ記録ができます。各ラップはそのラップ単独のタイムと累計タイムの両方を保持し、一覧はまとめてコピーできます。
スペースで開始 / 一時停止、L でラップ、R でリセット。
まだラップが記録されていません。
ラップとスプリットタイム、キーボードショートカット、結果一覧のコピーに対応した高精度オンラインストップウォッチ。単調時計を使うため、バックグラウンドタブでもずれません。
ずれないストップウォッチ。 ボタンでもキーボードでも開始・一時停止・ラップ記録ができます。各ラップはそのラップ単独のタイムと累計タイムの両方を保持し、一覧はまとめてコピーできます。
スペースで開始 / 一時停止、L でラップ、R でリセット。
まだラップが記録されていません。
ストップウォッチを作るときに真っ先に思いつくのは、タイマーが発火するたびに一定量をカウンタに足す方法です。しかしそれは誤った方法でもあります。ブラウザのタイマーは時間どおりに発火する保証がないからです。別のタブに切り替えれば間隔は 1 秒に 1 回まで絞られるか完全に停止し、ノート PC をスリープさせれば止まってしまいます。そうやって作ったカウンタは時間を失い、失った分は二度と戻りません。
このストップウォッチは代わりに開始した瞬間を記録し、再描画のたびに現在の瞬間からそれを引きます。何も累積しないため、誤差も累積しようがありません。タブが絞られると表示の更新は止まりますが、裏側の時計は動き続けており、戻ってきた最初のフレームで正しい経過時間が表示されます。離席中に遅れた数字が出ることはありません。
ここで使っているのは performance.now() で、ページ読み込み時からカウントし、前にしか進みません。これが重要なのは、壁時計の時刻、つまり Date.now() が返す値は飛ぶことがあるからです。NTP の補正がわずかに動かし、夏時間の切り替えがずらし、ユーザーがシステム時計を変更すれば数時間単位でどちらの方向にも動きます。
壁時計から読むストップウォッチはこれらの飛びをそのまま引き継ぎます。計測の途中で NTP 同期が走れば、記録された区間は単純に誤りになりますが、画面上にはそれを示すものが何もありません。単調な時間源にはこの失敗モードがありません。何とも同期しておらず、調整もできず、測っているのは経過時間だけです。
各行には 2 つの数値が記録されます。累計は開始からそのラップまでの時間、ラップは前のラップからの時間です。この 2 つは別々の問いに答えるものなので、自分がどちらを見ているのかを意識する価値があります。
8 周を走るランナーを計測するとき、ラップタイムはペースを維持しているのか、垂れているのか、上げているのかを教えてくれます。つまり 1 周ごとの出来です。累計タイムは全体の目標タイムに対してどの位置にいるかを教えてくれます。累計だけを見ていると減速に気づきにくくなります。どの数字にもそれ以前のすべてが含まれているからです。逆にラップだけを見ていると全体の結果を見失います。両方を表示すれば同じ表からペースと進捗の両方を読み取れますし、書き出したデータにも 2 列とも残るので、貼り付けた先でもそのまま使えます。