番茄钟
专注工作，高效休息，科学管理你的时间
什么是番茄钟？
番茄钟用于实践番茄工作法，把工作拆成清晰的专注时段和休息时段。经典做法是专注 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 生产力研究）等变体通过对同一个 FSM 参数化即可实现。 简单的计时方式使用 `setInterval(tick, 1000)` 递减计数器，但 JavaScript 计时器存在漂移：每次回调在主线程繁忙时可能延迟 1003-1020 ms 才触发，而 HTML5 Page Visibility API 配合浏览器策略会将隐藏标签页的计时器节流到约 1 Hz（Chrome/Firefox/Safari，Safari 甚至可低至每分钟 1 次）。防漂移方案在开始时存储 `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 ms 内渐弱至 0 -> `start()` 再 `stop(currentTime + 0.2)`。Notifications API 在用户一次性授权后通过 `Notification.requestPermission()` 弹出系统级提醒，然后 `new Notification('Focus complete', { body, icon, tag: 'pomodoro' })`（`tag` 用于快速触发时去重）。Wake Lock API 通过 `navigator.wakeLock.request('screen')` 在专注期间保持屏幕常亮，休息期间释放。`document.title` 在每次 tick 时重写为 `mm:ss - Focus`，使时间在标签栏中持续可见。设置项（时长、自动开始、声音）通过 `localStorage` 持久化（同步，约 5 MB 域配额）；环形进度是一个 SVG `<circle>`，通过 `stroke-dasharray = 2 * pi * r` 和 `stroke-dashoffset = dasharray * (1 - elapsed/total)` 动画绘制，无需 canvas 开销。关于注意力的背景研究——Cirillo 的 25 分钟边界、ADHD 中的时间感知研究，以及上下文切换的代价——解释了为什么硬性中断优于「再给我五分钟」的软性拖延。
- 四状态 FSM（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 ms 线性渐弱至 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 轮一次）
用途： 站会、Code Review、短反馈循环；专注块短，更容易开始常见问题
什么是番茄工作法？
由 Francesco Cirillo 在 1980 年代提出。经典模式是：专注工作 25 分钟、休息 5 分钟，循环往复。每完成 4 个「番茄」（工作时段）后休息 15-30 分钟。这种结构通过倒计时强迫你启动，又通过短暂休息奖励坚持，避免精力耗尽。
可以自定义工作和休息时长吗？
可以。默认是 25/5/15（工作/短休/长休），每 4 个番茄后长休。可任意调整时长以匹配任务：50/10 的「Ultradian」节奏适合深度编码；90/30 适合学习；15/3 适合纯执行性工作。默认值只是起点，并非唯一正确答案。
番茄进行中被打断怎么办？
Cirillo 的原版规则：打断时间短就忽略，把番茄做完。如果必须停下，这个番茄不计数，需要重新开始。严格规则训练你保护专注时间。现代版做法更灵活——必要时可以暂停，但记录打断次数能看出什么在消耗你的专注力。
标签页在后台时闹钟会响吗？
浏览器会节流后台标签页，可能会抑制音频。要确保闹钟响起：保持标签页前台、授予浏览器通知权限，或为关键工作使用桌面端番茄应用。如允许，页面在移动端还会震动提醒。
会统计完成的番茄数吗？
当前轮次的计数会在会话期间显示，但不会持久化。只有计时器设置（工作/休息时长、自动开始偏好）会保存到 localStorage。关闭或刷新页面后，已完成的番茄数会重置。
可以为当前任务加标签吗？
大多数版本支持在计时器上方显示当前任务名称。对录屏演示或自我督促很有用。部分进阶版本会保存按任务的番茄日志——比完整的任务追踪器更轻量。
我的数据会上传吗？
不会。计时器状态和历史都存储在浏览器的 localStorage 中，不会发送到服务器。清除站点数据会重置一切。