电脑从睡眠模式唤醒后，如何重启计时Web Worker？

咱们先搞清楚为啥会出现这个情况：当电脑进入睡眠模式时，浏览器的定时器（包括Web Worker里的setInterval）会暂停运行，不会在后台偷偷继续计时。等电脑唤醒后，定时器虽然会恢复，但你是手动每秒累加1000来维护时间戳的——这就导致睡眠期间的时间完全没被算进去，自然返回的时间就滞后了。

要解决这个问题，核心思路是在主线程检测系统唤醒的时机，然后重启Web Worker——因为Worker本身没法直接监听系统级的睡眠/唤醒事件，得靠主线程来触发重启操作。下面给你具体的实现方案：

步骤1：主线程管理Worker生命周期 #

我们在主线程里保存Worker实例，同时记录Worker最后一次活跃的时间戳，用来判断系统是否进入过睡眠。

let workerInstance;
let lastWorkerUpdateTime = Date.now();

// 封装初始化/重启Worker的函数
function restartTimeWorker() {
  // 如果之前有Worker在运行，先终止它
  if (workerInstance) {
    workerInstance.terminate();
  }
  // 创建新的Worker实例
  workerInstance = new Worker('time-worker.js');
  
  // 接收Worker发来的时间戳，更新活跃时间
  workerInstance.onmessage = (event) => {
    console.log('当前时区时间戳:', event.data);
    lastWorkerUpdateTime = Date.now();
  };
}

// 首次初始化Worker
restartTimeWorker();

步骤2：监听系统唤醒事件 #

我们可以通过页面可见性变化和焦点事件来检测系统唤醒，再结合时间差判断是否真的是睡眠后唤醒（避免正常页面切换的误判）：

// 监听页面可见性变化（睡眠后唤醒页面会从隐藏变可见）
document.addEventListener('visibilitychange', () => {
  if (!document.hidden) {
    const timeGap = Date.now() - lastWorkerUpdateTime;
    // 如果时间差超过2秒（给定时器误差留余地），说明系统大概率睡眠过
    if (timeGap > 2000) {
      console.log('检测到系统唤醒，重启Worker');
      restartTimeWorker();
    }
  }
});

// 补充监听页面焦点事件（比如唤醒后用户点击页面）
window.addEventListener('focus', () => {
  const timeGap = Date.now() - lastWorkerUpdateTime;
  if (timeGap > 2000) {
    console.log('页面重新获取焦点，重启Worker');
    restartTimeWorker();
  }
});

步骤3：Worker代码保持你的逻辑（或优化） #

你的Worker代码可以保持原来的累加逻辑，初始化时记得用当前时区的时间戳：

// time-worker.js
// 初始化时获取正确的时区时间戳
let userTimezoneTimestamp = new Date().getTime();

setInterval(() => {
  userTimezoneTimestamp += 1000;
  postMessage(userTimezoneTimestamp);
}, 1000);

额外优化建议 #

其实你完全可以不用手动累加时间戳——每次定时器触发时直接获取当前时区的时间，这样即使系统睡眠，唤醒后也能拿到正确的时间，根本不需要重启Worker：

// time-worker.js 优化版
setInterval(() => {
  // 直接获取当前时区的时间戳，永远准确
  const userTimezoneTimestamp = new Date().getTime();
  postMessage(userTimezoneTimestamp);
}, 1000);

这个方案更简单可靠，除非你有特殊需求必须手动维护累加的时间戳，否则优先考虑这个优化。

内容的提问来源于stack exchange，提问作者Harshal Ringe