Homepage

Appearance

14 · 计时器节流问题 ​

字数: 0 字 时长: 0 分钟

一句话 ​

标签页 切到后台 时，Chrome 会把 setInterval 节流到约 1 秒；若业务要求「失焦也要精确计时」（如编辑超时退出），要把计时放到 Web Worker，或 Hack 替换全局 timer。

和你日常工作的关系 ​

  • 在线编辑「30 分钟无操作自动退出」
  • 协作锁、心跳包
    若只用主线程 setInterval，用户切到别的标签再回来，计时会 不准。

原因 ​

浏览器为了省电，后台标签降低定时器频率（最小间隔可达 1000ms+）。

方案 ​

  1. Page Visibility API：document.visibilityState — 仅适合「失焦就暂停」的场景。
  2. Worker 里 setInterval：Worker 在后台仍相对准确（演示可见差异）。
  3. HackTimer：用 Blob 创建 Worker，重写 window.setInterval/setTimeout，主线程只收回调（课程完整脚本）。

演示（必玩） ​

14-timer-background.html — 开始后 切到其他标签 10 秒，对比主线程 log 与 Worker log。

心跳（课件补充） ​

与后端每分钟心跳保持「正在编辑」状态；计时精度要求不高时，主线程 + 节流也可接受，但要知悉偏差。

面试 ​

  • 现象：后台 setInterval 变慢。
  • 解决：Worker 计时 / visibility 暂停策略。
  • 扩展：HackTimer 原理 — 主线程假 timer，真 timer 在 Worker。

课程资料 ​

14.计时器节流问题/14-技术讲解.md

/次