番茄鐘
專注工作，高效休息，科學管理你的時間
什麼是番茄鐘？
番茄鐘用於實踐番茄工作法，把工作拆成清楚的專注時段和休息時段。經典做法是專注 25 分鐘，休息約 5 分鐘，完成幾輪後再進行一次較長休息。它的價值不在於數字必須固定，而在於建立邊界：任務變得更小，分心事項可以延後處理，休息也能避免注意力在不知不覺中下降。這個工具適合學習、寫作、程式開發、家務、行政事務和需要節奏感的重複工作。對於會議、深度創作、照護任務或體力勞動，應依實際情況彈性調整時長和休息。
使用方法
基本操作
- 選擇工作模式：專注、短休息或長休息
- 點選「開始」按鈕啟動計時器
- 專注工作到計時結束，聽到提示音後再休息
- 每完成 4 個番茄鐘就能享受一次長休息
自訂設定
專注技巧
- 每個專注時段只做一件明確的任務，別把計時器當成多工的背景時鐘。
- 依工作內容調整時長：高阻力的任務適合較短的時段，深度閱讀或寫程式則可選用較長的時段。
使用場景
技術原理
番茄工作法由 Francesco Cirillo 於 1980 年代末提出，規範了一個四階段循環：25 分鐘專注時段（一個番茄）、5 分鐘短休息，重複四輪後進入 15-30 分鐘長休息。整個排程是一個有限狀態機，包含四個狀態（`work`、`shortBreak`、`longBreak`、`idle`），由單一倒數計時器驅動狀態轉換；每完成一次 `work -> break` 轉換，輪次計數器加一，當 `round % roundsBeforeLong === 0` 時觸發長休息分支。50/10（深度工作）和 52/17（Draugiem Group 生產力研究）等變體只是對同一狀態機進行參數化調整。 簡單的計時方式是用 `setInterval(tick, 1000)` 遞減計數器，但 JavaScript 計時器存在漂移問題：在主執行緒繁忙時，每次回呼可能延遲 1003-1020 毫秒才觸發，而 HTML5 Page Visibility API 加上瀏覽器策略，會將隱藏分頁的計時器節流到大約 1 Hz（Chrome/Firefox/Safari），Safari 甚至低至每分鐘觸發一次。抗漂移的做法是在開始時儲存 `endTimestamp = performance.now() + remainingMs`，然後每次 tick 重新計算 `remainingMs = Math.max(0, endTimestamp - performance.now())`——這樣分頁從 10 分鐘的背景狀態恢復時，會立即追上進度，而非計數 10 個虛構的秒數。`performance.now()` 是高精度單調時鐘，不受系統時鐘調整（NTP、手動改時間）影響；`Date.now()` 僅用於在頁面重新載入時持久化截止時間。 四個瀏覽器 API 讓計時器在使用者處理其他工作時仍然可用。Web Audio API 以零資源成本產生階段結束提示音：`new AudioContext()` -> `createOscillator()` 設為 800 Hz -> `createGain()` 在 200 毫秒內線性衰減到 0 -> `start()` 然後 `stop(currentTime + 0.2)`。Notifications API 在一次性授權後透過 `Notification.requestPermission()` 顯示系統級提醒，然後 `new Notification('專注完成', { body, icon, tag: 'pomodoro' })`（`tag` 用於去重快速觸發的通知）。Wake Lock API 透過 `navigator.wakeLock.request('screen')` 在專注期間保持螢幕亮起，休息時釋放。`document.title` 在每次 tick 時更新為 `mm:ss - 專注`，讓時間在分頁標籤列中保持可見。設定（時長、自動開始、聲音）透過 `localStorage` 持久化（同步，約 5 MB 來源配額）；環形進度條使用 SVG `<circle>`，其 `stroke-dasharray = 2 * pi * r` ，`stroke-dashoffset = dasharray * (1 - elapsed/total)` 動畫渲染環形，無需 Canvas 開銷。關於注意力的研究——Cirillo 的 25 分鐘邊界、ADHD 時間知覺研究以及情境切換的成本——解釋了為什麼硬性打斷優於「再給我五分鐘」的軟性提醒。
- 四狀態有限狀態機（work/shortBreak/longBreak/idle）；`round % roundsBeforeLong === 0` 時觸發長休息。預設 25/5/15 分鐘、4 輪；變體 50/10/30（深度工作）和 52/17（Draugiem 研究）。
- 抗漂移計時：儲存 `endTimestamp = performance.now() + remainingMs`，每次 tick 重新計算 `remainingMs = endTimestamp - performance.now()`——不受 `setInterval` 滑移和隱藏分頁節流影響。
- `performance.now()` 是高精度單調時鐘（不受 NTP 或手動調整系統時間影響）；`Date.now()` 僅用於跨頁面重新載入持久化截止時間。
- 透過 Web Audio API 產生階段結束提示音：`new AudioContext()` -> `createOscillator()`（800 Hz 正弦波）-> `createGain()` 在 200 毫秒內線性衰減到 0 -> `start()`/`stop()`。零音訊資源開銷。
- 透過 Notifications API 顯示系統提醒：`Notification.requestPermission()` 一次性授權，然後 `new Notification(title, { body, tag: 'pomodoro' })`；`tag` 在多個階段於分頁隱藏時結束的情況下去重。
- 螢幕 Wake Lock API：專注期間 `navigator.wakeLock.request('screen')` 防止螢幕休眠；休息時釋放。分頁失去可見性時喚醒鎖自動釋放，需在 `visibilitychange` 時重新取得。
- 持久化與 UI：`localStorage`（約 5 MB 配額）儲存時長/自動開始/聲音設定；SVG 環形使用 `stroke-dasharray = 2*pi*r` 動畫化 `stroke-dashoffset`；`document.title` 更新為 `mm:ss - 階段` 以在分頁標籤列顯示時間。
範例
經典番茄鐘（Francesco Cirillo）
專注： 25 分鐘
短休息： 5 分鐘
長休息： 15 分鐘（每 4 輪）
用途： 辦公、學習與寫程式時段的預設選擇；一個完整循環 = 2 小時深度工作模式
專注： 50 分鐘
短休息： 10 分鐘
長休息： 30 分鐘（每 3 輪）
用途： 寫作、設計或解決難題的時段；較長的專注區塊可降低情境切換成本快速迭代模式
專注： 15 分鐘
短休息： 3 分鐘
長休息： 10 分鐘（每 5 輪）
用途： 站立會議、程式碼審查、短回饋循環；專注區塊較短時更容易啟動常見問題
什麼是番茄鐘工作法？
由 Francesco Cirillo 於 1980 年代提出。經典模式：專注工作 25 分鐘，休息 5 分鐘，重複進行。每完成 4 個「番茄」（工作區段）後，再來一段 15 至 30 分鐘的長休息。這個結構強迫你開始（計時器倒數中），又能在不過度消耗的前提下，以小休息獎勵你的堅持。
可以自訂工作與休息時間嗎？
可以。預設是 25/5/15（工作／短休息／長休息），每 4 個番茄後一次長休息。請依任務挑選時間：50/10「Ultradian」節奏適合深度寫程式；90/30 適合讀書時段；15/3 適合純執行的工作。預設值只是起點，並不是唯一的合理選擇。
番茄做到一半被打斷怎麼辦？
Cirillo 的原始規則：如果中斷很短，就忽略它把番茄做完；如果不得不停下，這個番茄就不算數，得重來。嚴格規則能訓練你保護專注時間。較現代的調整則更有彈性——必要時可暫停，但要記下中斷次數，看看是什麼在偷走你的專注力。
分頁切到背景時鬧鐘會響嗎？
瀏覽器會節流背景分頁，並可能抑制音訊。要確保鬧鐘響起：保持分頁在前景、允許瀏覽器通知權限，或對重要工作改用桌面版番茄鐘 App。若你允許，本頁在行動裝置上也會震動提醒。
會記錄完成的番茄數嗎？
目前回合數會在工作期間顯示，但不會被持久化。只有計時器設定（工作／休息時長、自動開始偏好）會儲存到 localStorage。已完成的番茄計數會在你關閉或重新整理頁面時歸零。
可以為目前在做的事加上標籤嗎？
多數版本可在計時器上方加上目前任務名稱。錄製螢幕示範或想對自己負責時很實用。某些進階版本還會保留每項任務的番茄記錄——比完整的任務追蹤工具輕量許多。
我的資料會被上傳嗎？
不會。計時器狀態與歷史紀錄都存在你瀏覽器的 localStorage 中，不會傳送到任何伺服器。清除網站資料就會全部重設。