Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

计时器时间是不靠谱的

  很多网页上都会有倒计时之类的需求,虽然只是一个计时器就能实现的东西,但其中也有很多不好的实践。依赖计时器时间这件事就是个坑,因为现代浏览器为了性能考虑会将后台页面的计时器变慢甚至暂停。如果用计时器去递增或递减一个时间,那么在窗口切换到后台后就会呵呵。
  计时器只是提供了一个到期触发的功能,而且使用的是相对时间。计时器唯一可靠的部分就是触发这件事而已。主要计时器是有效的,到期就一定会触发。而具体是什么时候触发,触发的频率多高,这些都是不可靠的。如果是一个倒计时的程序,那么我们只能通过计时器来更新 UI 部分,至于更新的具体内容,一定不能通过计时器的时间得到,得重新计算。比如倒计时一般是某个时间减去当前时间的绝对值。下面是一个简单的例子:
<script> var timePoint = Date.now() + 100E3; setInterval(() => { document.body.textContent = timePoint - Date.now(); }, 16); </script>   除了倒计时外,基于计时器的动画同样也可能有这种问题。虽然一般的动画被切换到后台后暂停也没关系,但有些有实时性需求的动画效果就不能这样。一个典型的例子就是弹幕。这时候如果动画是一个 UI=f(time) 的函数,那么 time 就应该是通过 Date 计算出来的相对真实时间,而不应该让计时器去递增自变量。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^