拒绝 `setInterval`！手撕“死了么”生命倒计时，带你看看 60FPS 下的 Web Worker 优雅多线程

拒绝 `setInterval`！手撕"死了么"生命倒计时，带你看看 60FPS 下的 Web Worker 优雅多线程

摘要：还在用 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

ini 复制代码

// 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

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

scss 复制代码

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。

互动时刻 💬

你的"生命倒计时"还剩多少？

不到 30%，求求别卷了，躺平吧 🛌

刚过 20%，扶我起来，我还能学！📚

本人：我觉得我和前端加一起还能再活 500 年！（手动狗头）

码字不易，如果你觉得这个 Worker 方案有点东西，给小老弟点个赞吧！👍

拒绝 `setInterval`！手撕“死了么”生命倒计时，带你看看 60FPS 下的 Web Worker 优雅多线程