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

使用SVG 标签(SMIL动画)

 
 
 
   
  
  
    
  
  
       
  
  
        
  
  
  
      attributeName="rx"   
  
  
        values="0;1"   
  
  
        dur="1s"   
  
  
        repeatCount="indefinite"   
  
  
      />

如果这样调用：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 的实现：

 
 
 
   
  
  
  function ownSetTimeout(callback, duration) {   
  
  
    const div = document.createElement('div');   
  
  
     
  
  
    const keyframes = new KeyframeEffect(div, [], { duration, iterations: 1 });   
  
  
     
  
  
    const animation = new Animation(   
  
  
      keyframes,   
  
  
      document.timeline   
  
  
    );   
  
  
     
  
  
    animation.play();   
  
  
     
  
  
    animation.addEventListener('finish', () => {   
  
  
      callback();   
  
  
    });   
  
  
  }

很整洁，不是吗?

优点

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

缺点

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

新闻标题：浏览器中实现JavaScript计时器的4种创新方式
URL网址：http://www.shufengxianlan.com/qtweb/news41/255241.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容