requestAnimationFrame做定时器不准?

requestAnimationFrame做定时器不准,设置1000毫秒打印一次时间,后面执行的会跳一秒,有的会打印两次一样的时间

这种怎么处理比较好?

阅读 2.5k
4 个回答

不知道你出于什么考虑用requestAnimationFrame做定时器,如果你了解requestAnimationFrame的工作原理,那你就知道它为什么不准了。首先浏览器有一个帧的概念,浏览器每秒刷新60次,每次时隔1/60s,也就是一帧。这一帧内,浏览器会接受输入,执行事件回调,开始一帧,执行requestAnimationFrame,然后是布局、渲染,有空闲时间再执行requestIdleCallback。看上去没啥问题,但是你没法保证每一帧里js执行的时间,如果js同步执行时间过长,那么这一帧的时间就会超过,导致浏览器每秒没法刷新60次,也就是出现了页面的卡顿,所以你用requestAnimationFrame做定时器是没法保证间隔是稳定的。

定时器有专门的setTimeout和setInterval。

rAF的场景是用来优化动画的,确保在浏览器渲染下一帧之前执行

你不看mdn的吗,这玩意的执行是根据帧率来变的
js就没有准的定时器,只能用setTimeout和setInterval

如果只是作为定时还是建议 setTimeout和setInterval;

requestAnimationFrame适合做动画;

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏