hourglass_bottom カウントダウンタイマー star

本当に知らせてくれるタイマー

時間・分・秒を入力または調整し、開始を押すとカウントダウンが進みます。ブラウザのタブタイトルも残り時間とともに更新されるため、別のタブで作業していても一目で残り時間を確認できます。ゼロに達すると、あらかじめ読み込む音声ファイルを必要としないその場で生成されるアラーム音が鳴り、気づきやすいようページも点滅します。一時停止と再開はいつでも自由に行え、新しい時間を設定したいときはリセットするだけです。料理、運動のインターバル、時間制限のあるテスト、ポモドーロ式の集中セッション、あるいは立ち上がる合図など、幅広い用途に使えます。

正確さを保つ仕組み

setIntervalが発火するたびに残り時間から1秒ずつ引いていくだけのカウントダウンは、一見シンプルですが時間の経過とともに正確さを失っていきます。各tickは正確に1000ミリ秒が経過したものと仮定しますが、実際にはブラウザのイベントループが他のスクリプトやアニメーション、バックグラウンドタブの処理などで忙しくなり、tickが数ミリ秒遅れて発火することがあります。こうした小さな遅延が積み重なると目に見える誤差になり、この方式で作られた10分のタイマーは、ゼロに達する頃には数秒早く、あるいは遅く終わってしまうことがあります。

このツールは異なる方式でこの問題を回避しています。開始ボタンを押した瞬間に、現在時刻と設定した時間を足した固定の目標時刻（ターゲットタイムスタンプ）を計算し、以降は毎回のtickで「その目標時刻まであとどれだけ残っているか」を単純に問い直すだけで、残り時間から引き算を積み重ねていく方式は取りません。残り時間は常に2つの実際の時刻の読み取りから再計算されるため、蓄積したtickの遅延は自動的に打ち消され、個々のtickが遅れて発火しても表示される時間は正確なまま保たれます。計測しているタブがバックグラウンドにあると、ブラウザはバッテリーやCPUを節約するためタイマーの発火を間引き、要求よりも少ない頻度でしか実行しないことがよくあります。目標時刻方式はこの状況にもうまく対応します。tickがいくつスキップされたかは問題にならず、次に実行されたときに実際の目標時刻と実際の現在時刻を比較するだけなので、途中でタブがどれだけ間引かれていても、正しい瞬間にゼロに到達します。

• アラーム音はWeb Audio APIのオシレーターノードでその場で生成されるため、音声ファイルの読み込みを待つ必要も、再生前の遅延もありません。
• ブラウザのタブタイトルが残り時間とともに更新されるため、別のタブを見ていてもカウントダウンを確認できます。
• 一時停止すると残り時間が保存され、再開時に新しい目標時刻を再計算するため、一時停止と再開によって誤差が生じることもありません。