摘要：还在用setInterval写倒计时？难怪你的 App 切到后台就“假死”。今天从“死了么”APP 的核心痛点出发，带你用 Web Worker+ RAF 重构高精度计时器。拒绝时间偏差，这才是理工男对待生命的严谨态度。
写在前面：焦虑的具象化
最近朋友圈被一款叫“死了么”的 APP 刷屏了（其实就是各种 Life Countdown 类应用）。看着屏幕上那个不断动的数字，精确到毫秒地计算着你离“删库跑路”（划掉）——离“百年之后”还剩多少时间，确实让人有一种被时间追着砍的紧迫感。
作为一个“代码洁癖患者”，我第一时间下载体验了一下。UI 很酷，但当我把它挂在后台，刷了一会儿掘金再切回来时，发现倒计时竟然卡顿了一瞬间，然后才跳到了正确的时间。
不能忍！绝对不能忍！
对于普通用户这叫“卡顿”，对于我们开发者来说，这是对Event Loop的亵渎！很多同学在大一学 JS 的时候，老师都教过setInterval做倒计时，但今天我要告诉你：在生产环境的高精度倒计时里，setInterval就是个骗子。
今天，我们就来扒开“时间”的底裤，用Web Worker+ requestAnimationFrame
手搓一个永不偏差、丝般顺滑的生命倒计时组件。
1. 为什么setInterval是个“渣男”？
在面试的时候，如果面试官问你：“setInterval(fn, 1000) 真的是每 1000ms 执行一次吗？”
你要是敢说是，那基本就回去等通知了。
1.1 单线程的“银行柜台”悲剧
JS 的主线程就像只有一个柜台的银行。
setInterval 并不是“准时执行”，而是“准时把任务扔进排队大厅（任务队列）”。
如果柜台正在处理一个大客户（比如一段耗时的for循环，或者复杂的 DOM 渲染），你的定时器回调就得在后面干等。
⚠️高能预警：这就是著名的Event Loop 阻塞。你以为过了 1 秒，实际可能已经过了 1.5 秒。
1.2 浏览器的“节能模式”背刺
更坑的是，为了省电，现代浏览器（Chrome/Safari）对后台标签页极其残忍。如果你的页面切到了后台，setInterval的执行频率会被强行降频到1 秒甚至更久。
这也是为什么我切回 APP 时会看到时间“跳变”的原因——因为计时器在后台“睡着”了。
2. 破局：Web Worker —— 找个“分身”来计时
既然主线程（UI 线程）又忙又不靠谱，那我们就开个“外挂”。
Web Worker允许我们在主线程之外运行脚本。它就像是银行里的VIP 专属柜台，完全不受主线程 DOM 渲染和 UI 卡顿的影响。哪怕主线程在进行复杂的 Canvas 渲染，Worker 里的计时器依然稳如老狗。
2.1 架构设计：主仆分离
我们要实现一个优雅的架构：
- Worker 线程：只负责“滴答”，每隔一段固定时间（比如 100ms）向主线程发一个“心跳包”。
- Main 线程：负责“渲染”，接收到心跳后，利用
requestAnimationFrame更新 UI。
这种模式在游戏开发中叫“逻辑与渲染分离”，非常高级。
3. Talk is Cheap, Show me the Code
我们要实现一个 Hook：useLifeCountdown。
Step 1: 编写那个“不知疲倦”的 Worker
首先，创建一个timer.worker.js。这是我们的独立时间守护者。
JavaScript
// timer.worker.js let timerId = null; let interval = 1000; // 监听主线程指令 self.onmessage = (e) => { const { action, payload } = e.data; if (action === 'START') { interval = payload || 1000; // 💡 即使在这里用 setInterval，由于 Worker 是独立线程 // 它不会受主线程 UI 卡顿影响，也不会因为页面后台而轻易降频（大部分情况） timerId = setInterval(() => { // 只发送“脉冲”，不发送具体时间，减少数据传输量 self.postMessage({ type: 'TICK' }); }, interval); } else if (action === 'STOP') { if (timerId) { clearInterval(timerId); timerId = null; } } };Step 2: 主线程的“优雅”接收 (Vue3/React 通用逻辑)
这里用 TypeScript 写一个 Class 来封装，显得咱们比较专业。
TypeScript
// PreciseTimer.ts export class PreciseTimer { private worker: Worker; private startTime: number; private duration: number; // 倒计时总时长（毫秒） private callback: (remaining: number) => void; constructor(duration: number, callback: (time: number) => void) { this.duration = duration; this.callback = callback; this.startTime = Date.now(); // 💡 实例化 Worker (注意 Vite/Webpack 的引入方式可能不同) this.worker = new Worker(new URL('./timer.worker.js', import.meta.url)); this.worker.onmessage = (e) => { if (e.data.type === 'TICK') { this.syncTime(); } }; } // 核心：基于系统时间的校准机制 private syncTime() { const now = Date.now(); // 逝去的时间 const elapsed = now - this.startTime; // 剩余时间 const remaining = Math.max(0, this.duration - elapsed); // 🔥 重点：虽然 Worker 触发了 update，但我们要用 requestAnimationFrame // 确保 UI 更新与屏幕刷新率同步，避免画面撕裂 requestAnimationFrame(() => { this.callback(remaining); }); if (remaining <= 0) { this.stop(); } } public start() { // 告诉 Worker：每 16ms (约 60FPS) 叫我一次 // 实际上我们可以设置得大一点，比如 50ms，因为 syncTime 会计算精准插值 this.worker.postMessage({ action: 'START', payload: 20 }); } public stop() { this.worker.postMessage({ action: 'STOP' }); this.worker.terminate(); // 杀掉 Worker，释放内存 } }💡 极客细节：
细心的同学发现了，我在 syncTime 里重新计算了 Date.now() - startTime。
为什么要这么做？
因为 Worker 的 setInterval 虽然稳定，但长期运行依然会有微小的累积误差。“时间戳差值法” 是消除误差的终极奥义——无论中间 tick 此时准不准，我每次计算的都是物理世界的绝对时间差。这就是**“无状态”**计时的精髓。
4. 视觉层：让焦虑“流动”起来 (Canvas 粒子) 🎨
有了精准的时间内核，剩下的就是皮囊了。为了致敬“死了么”，我们不用枯燥的<div>文字，我们用 Canvas 画一个生命进度条。
(为了不占篇幅，这里只放核心渲染逻辑)
JavaScript
function drawLifeBar(ctx, percentage) { // 清空画布 ctx.clearRect(0, 0, width, height); // 渐变色：从生机勃勃的绿 -> 焦虑的黄 -> 绝望的红 const gradient = ctx.createLinearGradient(0, 0, width, 0); gradient.addColorStop(0, '#4ade80'); // Green gradient.addColorStop(0.5, '#facc15'); // Yellow gradient.addColorStop(1, '#ef4444'); // Red ctx.fillStyle = gradient; // 使用贝塞尔曲线画出液体的流动感 // 这里的 offset 可以根据 performance.now() 动态变化，产生波浪效果 ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(width * percentage, 0); ctx.lineTo(width * percentage, height); ctx.lineTo(0, height); ctx.fill(); }当 PreciseTimer 的回调触发时，我们将 remaining / total 传给这个 drawLifeBar。
你会发现，哪怕你此时在狂拖浏览器窗口，或者并在几十个 Tab 页中反复横跳，这个进度条的推进依然稳如泰山，丝滑如德芙。
总结与升华：技术之外的思考
这就是我们作为技术人对“生命倒计时”的回应。
我们用Web Worker对抗了浏览器的后台节流，用时间戳差值对抗了运行时的累积误差，用RAF对抗了视觉卡顿。
我们总是试图在代码里追求0ms 的误差，追求O(1) 的复杂度。但回到现实，我们自己人生的“倒计时”——那个最终的clearInterval，却是无法重构的。
“死了么”APP 火爆的背后，不是因为技术多牛，而是它戳中了当代年轻人的“时间焦虑”。
所以，写完这个 Demo，我合上电脑，决定今晚不修那个该死的 Bug 了。 人生苦短，对老己好一点，出去吃个宵夜犒劳一下老己，好好休息一下（有空记得给老妈打电话）。
毕竟，代码可以回滚，人生只有一次 Commit。
