ブラウザのタイマーがずれる理由と、オンラインタイマーが正確に計る仕組み

ブラウザのタイマーは、刻みを数えるのではなく時計を読むことで正確になります。タイマーの開始時に終了時刻を保存し、画面が更新されるたびに現在時刻を引いてください。刻みが遅れたり、バックグラウンドのタブで遅くなったりしても、ページが確認した時点の引き算は正しい値になります。

オンラインタイマータイマーやストップウォッチが必要？無料で使う

カウント方式でタイマーがずれる理由

タイマーを作るよくある方法は、1秒ごとにカウンターを1ずつ減らす方式です。ブラウザはこの処理を繰り返しタイマーで実行します。これは一定のミリ秒ごとに関数を呼び出す仕組みです。ただし、ブラウザは正確な間隔を保証しません。処理の重いページや性能の低い端末、非表示のタブでは、1回ごとの刻みが遅れ、その遅れが積み重なります。1刻みあたり数ミリ秒ずつずれるカウンターは、数分もすると目に見えて狂います。

非表示のタブで起きること

ブラウザは、見ていないタブのタイマーを遅くします。バッテリーとプロセッサーの負荷を減らすためです。たとえばChromeでは、非表示のタブで繰り返しタイマーが実行される頻度を制限しています。さらに、長時間非表示だったタブでは、その頻度がかなり低くなることがあります。このようなタブでカウンターを使うと遅れが生じ、刻みを数えるカウントダウンが遅れて終わる原因になります。

代わりに時計を読む

解決策は、タイマーの開始時刻と終了予定時刻を記録することです。ブラウザは時間の計測に使う高精度の時計、performance.now()を提供しています。表示が更新されるたびに、タイマーは終了時刻から現在時刻を引いて残り時間を計算します。更新が遅れると一時的に古い数字が表示されますが、次の更新で正しい値に戻ります。計算は刻みの回数に依存しないからです。このサイトのオンラインタイマーもこの方式で動いています。

一時停止では残り時間を保存します。再開するときは、現在時刻に残り時間を足したものを新しい終了時刻として設定するので、一時停止が計測に影響することはありません。

ページでは、カウントダウンの終了時刻に合わせて別のタイマーも1つ設定しています。そのため、表示の更新が遅れていても、アラートが次の表示更新を待つことはありません。

表示が切り上げられる理由

カウントダウンは、残り時間を1秒単位で切り上げて表示します。3秒のタイマーは、開始時に00:03、実行中に00:02と00:01を表示し、終了時に00:00を表示します。切り捨てにすると、最後の1秒が00:00と表示されてしまい、1秒早く終わったように感じられます。キッチンタイマーも同じ表示方法です。

音と画面

音は、ブラウザの音声機能で生成されるため、音声ファイルをダウンロードする必要はありません。ブラウザは、ページ上でユーザーが操作した後にしか音を鳴らせないので、音声の準備は開始ボタンを押したときに行われます。端末の音量やミュートの設定は、これまでどおり有効です。

画面のスリープ防止は任意の機能です。ブラウザが対応していれば、タイマーの実行中に端末へ画面をオンのままにするよう要求できます。タブが非表示になるとブラウザはこの設定を解除するため、タブに戻ったときにページは再度要求します。

ストップウォッチのラップが計るもの

ストップウォッチは、動いていた時間の区間を足し合わせていきます。一時停止するとその合計は止まります。合計はスタートからの経過時間で、ラップは前回のラップからの合計の増分です。ラップ1の時間は最初の合計に等しく、ラップ2の時間は2回目の合計から1回目の合計を引いた値に等しくなります。表示は1/100秒単位ですが、計測精度は端末とブラウザに制限されるため、最後の桁は目安として扱ってください。ストップウォッチではなく勤務時間を求めたい場合は、勤務時間計算が時刻から計算を行います。詳しくは夜勤の勤務時間の計算方法を参照してください。

実用的な確認

• 料理や運動に使う前に、短いタイマーを時計と比べてください。30秒のテストで、端末が正しく動いているか確認できます。
• 音量を上げて、端末がサイレントモードになっていないか確認してください。
• タイマーは非表示のタブでも正確に時間を計りますが、タブを閉じたりページを再読み込みしたりすると、リセットされます。
• カウントダウン中にノートパソコンがスリープした場合は、復帰時に残り時間を確認してください。スリープ中の動作は、端末とブラウザによって異なります。

fixmintでの使い方

1. タイマーを選び、5分などのプリセットを押すか、時間、分、秒を入力します。
2. 開始を押します。別のタブに切り替えても時間は正確に保たれます。再読み込みするとタイマーはリセットされます。
3. ブラウザにその機能があれば、実行中は画面をオンのままにするにチェックを入れます。
4. ラップを計るには、ストップウォッチを選び、開始を押してから、区間ごとにラップを押します。
5. 料理や運動に使う前に、30秒のテストを時計と比べて計ってください。

例外的なケース

• 時計の変更。 カウントダウンは現在時刻ではなく経過時間を計るため、夏時間への切り替えの影響は受けません。
• 長いタイマー。 数時間のタイマーも正確に動きますが、その間に端末がスリープしていないか確認してください。
• 複数のタイマー。 タイマーごとに終了時刻が個別に保存されるため、2つのタブで2つのタイマーを動かしても互いに干渉しません。

よくある質問

バックグラウンドのタブでタイマーが遅れるのはなぜですか？ ブラウザは非表示のタブで繰り返しタイマーを遅くするため、刻みを数えるタイマーは遅れてしまいます。時計を読むタイマーは、この影響を受けません。

タブに戻ったとき、タイマーは正しい時間を表示しますか？ はい。保存された終了時刻をもとに、残り時間を表示します。

ラップと合計の違いは何ですか？ ラップは前回のラップからの時間です。合計はストップウォッチを開始してからの時間です。