當瀏覽器倒數計時器在 Start 時儲存一個錨定時間戳記,並在每次渲染時根據實際經過的牆上時鐘時間重新計算剩餘時間,而不是每個 tick 減去一個單位,它就能與實際時間精確對齊。因此,倒數計時器的準確度不在於顯示更新得有多快,而在於螢幕上的數字是否與你實際剩下的時間一致,即使你切換分頁、鎖定螢幕,或讓瀏覽器承受高負載。那些每個 tick 減去一個單位的樸素計時器,在幾分鐘後就會明顯飄移,因為瀏覽器的 tick 間隔從來都不是完全規律的;而一個設計良好的倒數計時器會錨定到一個已知的參考點,並在每次重新整理時自我校正。對於任何有嚴格截止期限的任務——五分鐘的演講、一輪 HIIT、一次計時模擬測試、一顆水煮蛋——「計時器顯示還剩 30 秒」與「你實際只剩 5 秒」之間的差距,正是你一開始使用計時器的全部理由。
「倒數計時器準確度」實際上代表什麼
倒數計時器的準確度,指的是在任何一個瞬間,顯示器上顯示的數字與到歸零為止真正剩餘時間之間的差距。一個計時器在開始時顯示 05:00,在實際經過五秒後剛好顯示 04:55,那就是完全準確。一個計時器在實際經過五秒後顯示 04:58,則是往錯誤的方向飄移了三秒。對於十秒的倒數,這種飄移看不出來,也無關緊要。但對於一個六十分鐘的深度工作區段,同樣比例的飄移會累積成好幾秒的誤差,這正是你會察覺到「計時器感覺比牆上時鐘慢」的時候。
兩個設計選擇決定了計時器會飄移還是保持準時。第一個是計時器把什麼視為真相來源——一個遞減的計數器,或是在 Start 時記錄的真實牆上時鐘時間戳記。第二個是當某個 tick 被延遲或跳過時,計時器會怎麼做——默默落後,還是根據實際經過時間重新計算,並在下次渲染時自我校正。許多現成的倒數計時器在兩種情況下都選擇第一種,並接受飄移。一個精準的瀏覽器倒數計時器則在兩種情況下都走第二條路。
為什麼樸素的瀏覽器倒數計時器會飄移
教科書上的倒數計時器實作,是使用一個 setInterval 風格的迴圈,每次回呼函式觸發時從計數器減去一。問題就出在「interval」這個詞:瀏覽器並不保證回呼函式會剛好每 1000 ms 觸發一次。HTML 規格只承諾一個「大約」所要求間隔的延遲,實際上,真正的延遲是瀏覽器排程器決定給你的時間——通常略多,有時候多很多,有時候略少。
有三件事會讓飄移更嚴重。第一,背景分頁:大多數瀏覽器會對不可見的分頁節流計時器,所以一秒的間隔可能變成每幾秒才觸發一次,或只在分頁重新取得焦點時才觸發。第二,忙碌的主執行緒:如果頁面正在渲染媒體、執行腳本,或僅僅在同一瞬間正在繪製,回呼函式會被排入佇列並延遲到達。第三,裝置睡眠與螢幕鎖定:當螢幕關閉時,tick 完全暫停,直到裝置喚醒才會恢復。
累積的結果是,一個樸素的計時器在實際經過五分鐘後可能顯示 05:10,但它應該顯示 05:00;而且倒數跑得越久,差距就越大。顯示器並沒有當機——它只是默默落後於實際時間,而且永遠追不回來,因為設計中沒有任何東西會把計數器與牆上時鐘做比較。
準確的瀏覽器倒數計時器如何保持正確時間
一個精準的瀏覽器倒數計時器會用兩個值取代遞減的計數器:你要求的持續時間,以及在你按下 Start 的瞬間擷取的牆上時鐘時間戳記。在每一次渲染時——無論那次渲染是每秒一次、每個動畫畫格一次,或只有在使用者看向分頁時——剩餘時間都會根據實際經過時間重新計算。因為那個即時值是從系統時鐘讀取的,所以不受分頁節流、螢幕鎖定或渲染延遲影響。
實際的結果是顯而易見的。切換到另一個分頁十秒後再回來,下一次渲染會顯示正確的剩餘時間,而不是又落後十秒。在長時間倒數時把頁面留在背景中一小時,等你回來時計時器依然準確。鎖定螢幕,頁面依然正確。在頁面上執行一個吃重的腳本,計時器仍會乾淨地落在 00:00,因為最後一次渲染使用的是實際經過時間,而不是一個一直默默在 tick 的計數器。
準確度的提升在程式碼上幾乎沒有成本:計時器不是儲存一個會遞減的整數,而是儲存兩個數字,並在每次渲染時做一次減法。輸出的行為就像一個往下計數而非往上計數的碼表。
用三個步驟設定並執行一個準確的倒數計時器
Online Countdown Timer 採用錨定時間戳記的做法,因此顯示能與實際時間保持對齊,並且只暴露你需要的控制項。
- 設定持續時間。在三個輸入欄位中輸入你需要的時、分、秒,或針對常見情況點選一個快速預設,例如 1、3、5、10 或 15 分鐘。計時器最多接受 99 小時,因此從九秒的衝刺到多小時的截止期限都能容納。
- 按下 Start。大型顯示器會立即顯示持續時間並開始倒數。因為計時器在 Start 時記錄了一個錨定時間戳記,所以即使你切換分頁、鎖定螢幕,或短暫加重瀏覽器負載,顯示依然保持準確。隨時按下 Pause 可凍結計數,再按 Resume 從停止的地方繼續。當時鐘正在運行時,輸入欄位會鎖住,所以你不會不小心動到持續時間。
- 聆聽提示音並重置。當剩餘時間到達零時,顯示器會乾淨地停在 00:00,顯示清楚的「Time's up!」訊息,並在你的瀏覽器允許音效時播放一個可選的短嗶聲。隨時按下 Reset 即可回到你設定的持續時間並重新開始。
整個計時器完全以純 JavaScript 在你的瀏覽器中本地運行,這代表不需註冊、沒有任何東西會被上傳,而且即使在連線不穩的狀況下頁面仍可運作。在任何分頁中開啟 Online Countdown Timer,就能讓一個準確的截止期限離你只有一次點擊的距離。
倒數計時器、碼表與番茄鐘:哪種工具適合
三個相關的工具經常被混用,而對每一個來說,準確度的意義各不相同。下表摘要了它們的差異,讓你能為任務挑選正確的工具。
| 工具 | 方向 | 持續時間 | 最適用於 | 準確度驅動因素 |
|---|---|---|---|---|
| 倒數計時器 | 從你設定的持續時間往零倒數 | 任意組合,從數秒到 99 小時 | 嚴格截止期限:演講、HIIT 組數、水煮蛋、螢幕時間上限、搶答回合 | 根據實際經過時間重新計算的錨定時間戳記 |
| 碼表 | 從零開始往上計數 | 無上限 | 測量已經過的時間:單圈時間、家事實際花了多久 | 同樣的錨定做法,但方向相反 |
| 番茄鐘計時器 | 以固定的 25/5 分鐘循環倒數 | 固定循環,重複進行 | 內建休息的結構化專注時段 | 同樣的錨定做法,但循環長度是固定的 |
如果你的任務有一組固定的分鐘數,在某件事必須發生之前就該完成,那倒數計時器就是正確的工具。如果你想知道某件事已經花了多久,那麼瀏覽器內建碼表是更好的選擇。如果你特別想要番茄鐘那種 25 分鐘專注 / 5 分鐘休息的節奏,專用的番茄鐘計時器會為你自動處理切換;番茄工作法指南會說明那種節奏與單純倒數有何差異。
倒數計時準確度真正重要的真實情境
大多數時候,一個「差不多」的計時器就夠了。以下這些情境,是飄移的計時器會默默讓你失望的地方,也是準確的倒數計時器會回本的地方。
廚房工作。溏心蛋大約需要六分半,全熟蛋大約九分鐘,一個嚴重飄移的計時器決定了你拿到的是完美蛋黃還是灰色外環。紅茶浸泡超過四分鐘會變苦;最後三十秒決定了這杯茶的好壞。
健身訓練。HIIT 組數通常包含三十或四十五秒的運動,以及十五秒的休息。一個每組慢兩秒的計時器,在十組之後就會落後二十秒——足以把最後一段休息變成半休息,進而打亂整個訓練。同樣的邏輯也適用於棒式支撐、組間休息,以及 tabata 間格。
簡報與教學。一個五分鐘的快講,搭配飄移 5% 的計時器,最後會超時十五秒——那正是能否留住全場注意力、還是拖時間的差別。同樣的風險也存在於計時的課堂活動、辯論,以及搶答時刻就是整個遊戲關鍵的搶答回合。
深度工作與讀書。一個五十分鐘的專注區段,如果用飄移的計時器計時,會比預期晚兩到三分鐘結束,這恰好會在你正需要一面可靠牆來靠著的時刻打斷心流。用飄移的計時器幫學生計時模擬測試,會讓他們對自己實際花多久產生錯誤認知。
螢幕時間與例行公事。為孩子設定二十分鐘螢幕時間限制的父母,不會希望計時器因為分頁被節流,就默默還回兩分鐘。一場用飄移計時器進行的打掃競賽,對拿到較短倒數的人是不公平的。
準確的本地計時器在隱私與可靠性上的副作用
因為一個準確的瀏覽器倒數計時器只需要讀取系統時鐘與做一次減法,整個計時器就以純 JavaScript 在你的裝置上本地運行。沒有伺服器往返,你設定的持續時間相關資料不會被上傳,也不需要帳號。同樣的純本地設計,也代表這個工具在第二次載入時能瞬間開啟,並且在連線不穩或沒有網路時仍可運作——當你在離線狀態下計時,例如露營爐煮水或野外訓練時,這點很重要。
如果你目前的計時器感覺不準,快速修正方式
如果你今天正在用的計時器似乎會落後,三個小檢查通常就能解釋原因。第一,對於每一秒都很重要的任務,請把分頁保持在前景;背景節流是飄移最常見的原因。第二,優先選擇會顯示 HH:MM:SS 的計時器,這樣你就能與牆上時鐘比對;四捨五入到整分鐘的計時器會隱藏小幅飄移。第三,選擇明確在 Start 時進行錨定、並根據實際時間重新計算的計時器——Online Countdown Timer 同時做到了這兩點,這也是為什麼它的顯示能在分頁切換間保持正確。
延伸閱讀:按鍵計數器準確度:它真正衡量的是什麼。