浏览器中实现JavaScript计时器的4种创新方式

 在 Web Worker中使用无限同步循环

由于 Web Worker 本质上是浏览Web线程，因此你可以在其中无限循环而不阻塞主线程。器中器这使你可以访问微秒级的实现式时间分辨率。这对于在 Worker 中做出时间关键的种创决策是特别实用的，可以让主线程准确的新方知道什么时候合适。例如：只要微秒是浏览质数，就渲染某些东西。器中器要访问微秒，实现式你可以使用 performance.now。种创

优点

微秒级分辨率。新方 UI线程的浏览成本几乎为零。 利用 Web Workers 的器中器消息传递设计，从UI线程角度完全异步。实现式 安全结束，种创与 setInterval 不同，新方调用 worker.terminate 保证不会再收到任何消息。

引用MDN：“ Worker 的源码库 Terminate() 方法立即终止 Worker。它不会为等待 Worker 完成里面执行的程序，而是会立即停止。”

缺点

即使你可以做出毫秒级的决策，但返回UI线程的消息传递也是异步的。你无法像在 Worker 中做出决定那样及时渲染。 保持线程完全被占用。手机电池可能会好点很快。 需要 Web Worker 支持。 选项卡未聚焦时不会暂停。

使用CSS动画处理时间事件(animationiteration)

如果创建带有无限动画的 div。你可以订阅其 animationiteration 事件，并在事件 animation-duration 回调时得到通知。

优点

自动暂停时，标签不在焦点。当标签不在焦点上时，事件根本不会触发。无需担心调用时卡住，源码下载这些调用将在再次显示选项卡时立即运行。 从 DOM 中删除隐藏的 div 时，将自动进行清理。例如，如果你有一个可渲染时间的 React 组件，则无需在卸载时做任何事情。该 div 将被删除，该事件将不再触发。 调用逻辑很优雅：.addEventListener("animationiteration", fun)。 超级干净的方法来延迟启动计时器：animation-delay。

缺点

有点太聪明了，可能会使你的协作者感到困惑。 取决于 DOM 和 CSSOM 。其他CSS规则可能会干扰你的规则。这就是为什么我建议创建一个像这样的任意不存在的标记的原因