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

• 微秒级分辨率。
• 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规则可能会干扰你的规则。这就是为什么我建议创建一个像这样的任意不存在的标记的原因 。也许用CSS动画代码整齐地放入其中创建自定义元素?。
• 如果元素具有 display: none; 属性，则无效。

（编辑：信阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!