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

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

[[317960]]

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

使用SVG 标签(SMIL动画)

 

 

[[317963]]

  1. <svg> 
  2.   <rect> 
  3.     <animate 
  4.       attributeName="rx" 
  5.       values="0;1" 
  6.       dur="1s" 
  7.       repeatCount="indefinite" 
  8.     /> 
  9.   </rect> 
  10. </svg> 

如果这样调用:animate.addEventListener('repeat', fun),你的函数将每秒被调用一次。

优点

  • 即使 SVG 为 display: none;也会生效。
  • 从 DOM 中删除 SVG 时自动停止。
  • 直到整页加载才开始渲染。
  • 选项卡聚焦时自动暂停。

缺点

  • 有点太聪明了,可能会使你的协作者感到困惑。
  • 取决于 DOM 和 CSSOM 。与上述相同的警告。其他CSS规则可能会干扰你的配置。
  • IE 和 Edge (在 Chromium 之前)不受支持。
  • 不准确 根据我的测试,它可能会延迟15ms。
  • 直到整页加载才开始。是的,可能是一个缺点,但是也是一个功能。

使用 Web Animations API

 

 

 

Web Animations API 允许你在 JavaScript 中为 DOM 元素设置动画。

有趣的是,你可以使未渲染完的元素具有动画效果!这使你能够访问纯 JS (和 Web api)中的定时机制。

这是替代 setTimeout 的实现:

 

  1. function ownSetTimeout(callback, duration) { 
  2.   const div = document.createElement('div'); 
  3.  
  4.   const keyframes = new KeyframeEffect(div, [], { duration, iterations: 1 }); 
  5.  
  6.   const animation = new Animation( 
  7.     keyframes, 
  8.     document.timeline 
  9.   ); 
  10.  
  11.   animation.play(); 
  12.  
  13.   animation.addEventListener('finish', () => { 
  14.     callback(); 
  15.   }); 

很整洁,不是吗?

优点

  • 不需要DOM交互。
  • 不熟悉的人容易理解。
  • 标签未聚焦时自动暂停。

缺点

  • 仍然是一个建议。不要在生产中使用。
  • 可怕的兼容性。可能仅适用于 Chromium。
  • 还是有点违反直觉的。
  • 标签未聚焦时暂停。如果用作 setTimeout 的替代品可能会很糟糕。
  • 不能间隔使用。仅 onfinish 活动可用。
  • 不准确 根据我的测试,误差 ±5ms。

 

责任编辑:华轩 来源: code秘密花园
相关推荐

2009-04-25 09:30:55

Firefox浏览器

2010-01-25 11:29:33

Android计时器

2013-05-23 16:01:47

Android开发移动开发Chronometer

2020-06-11 08:48:49

JavaScript开发技术

2017-01-05 09:07:25

JavaScript浏览器驱动

2012-05-08 13:58:37

SharePoint

2011-05-31 16:50:35

Android 线程

2023-04-17 09:08:27

CSS计时器

2011-04-25 11:05:10

javascript

2016-10-09 08:38:01

JavaScript浏览器事件

2021-11-26 00:04:20

Go计时器重构

2022-07-07 07:22:01

浏览器JavaScript工具

2016-09-21 14:24:37

3D全景浏览器浏览器

2020-03-12 11:29:51

JavaScript浏览器语言

2010-04-05 21:57:14

Netscape浏览器

2010-09-15 09:12:03

JavaScript浏览器兼容

2023-01-11 09:02:50

2021-03-13 20:47:51

微软Edge浏览器

2023-12-11 09:50:35

Linux定时器

2012-03-20 11:07:08

点赞
收藏

51CTO技术栈公众号