如何在 Worker 线程中实现一个虚拟计时器-H5教程-PHP中文网

Worker中需虚拟计时器因原生setTimeout/setInterval存在精度低、受主线程影响、最小延迟限制等问题；其核心是用performance.now()+postMessage轮询实现高精度、可暂停/调整的定时调度。

如何在 worker 线程中实现一个虚拟计时器

在 Worker 线程中无法直接使用 setTimeout 或 setInterval（虽然现代浏览器已支持，但存在精度限制和事件循环隔离问题），因此实现一个“虚拟计时器”本质是用 self.postMessage + performance.now() + 循环调度模拟高精度、可控制的定时行为。

为什么需要虚拟计时器？

Worker 中的原生定时器受主线程调度影响，且 setTimeout 最小间隔通常不低于 1ms（实际常为 4ms），还可能被节流；而虚拟计时器能：

绕过浏览器对定时器的最小延迟限制
避免因 Worker 消息队列积压导致的延迟漂移
支持暂停、恢复、动态调整间隔
在无 DOM 环境下保持时间逻辑自洽

核心思路：基于时间戳的主动轮询

不依赖系统定时器回调，而是用一个持续运行的微循环（如 requestIdleCallback 或 postMessage 自调用）不断检查当前时间与目标触发时间的差值。关键点：

用 performance.now() 获取高精度单调递增时间戳（推荐，比 Date.now() 更准）
维护一个有序任务队列（按触发时间升序），每次只检查队首是否到期
用 self.postMessage({ type: 'tick' }) 触发下一轮检查，避免阻塞 Worker 主线程
每次 tick 的间隔设为 0.5~2ms，兼顾精度与 CPU 占用

简易实现示例

以下是一个轻量、可复用的虚拟计时器类（Worker 内可用）：

class VirtualTimer {
  constructor() {
    this.tasks = []; // [{ id, time, callback }]
    this.running = false;
  }
<p>start() {
if (this.running) return;
this.running = true;
this._tick();
}</p><p>_tick() {
const now = performance.now();
// 执行所有已到期任务
while (this.tasks.length && this.tasks[0].time  this._tick(), 1); // 或用 postMessage 实现更可控的调度
}
}</p><p>setTimeout(callback, delayMs) {
const id = Math.random();
const time = performance.now() + delayMs;
this.tasks.push({ id, time, callback });
this.tasks.sort((a, b) => a.time - b.time);
return id;
}</p><p>setInterval(callback, intervalMs) {
const id = Math.random();
const startTime = performance.now();
const loop = () => {
callback();
const nextTime = startTime + Math.ceil((performance.now() - startTime) / intervalMs) * intervalMs;
this.tasks.push({ id, time: nextTime, callback: loop });
this.tasks.sort((a, b) => a.time - b.time);
};
loop();
return id;
}</p><p>clear(id) {
this.tasks = this.tasks.filter(t => t.id !== id);
}
}</p><p>// 在 Worker 入口初始化
const timer = new VirtualTimer();
timer.start();</p><p>// 使用示例
timer.setTimeout(() => {
self.postMessage({ type: 'log', msg: '3s 后触发' });
}, 3000);
</p>