requestAnimationFrame详解和应用

概述

window.requestAnimationFrame(callback)告诉浏览器需要在下一次重绘前执行callback更新动画帧。

与setTimeout、setInterval的区别

  • setInterval内的回调任务执行时间会影响到实际动画的执行间隔

  • setTimeout的执行频率和客户端UI更新的频率不一致，递归每次setTimeout执行动画，
    实际上是每次创建新的js的异步宏任务，会影响到主进程的执行

  • requestAnimationFrame实际执行的频率是按照UI更新频率16HZ,保证的执行动画和视图的流畅度；

requestAnimationFrame缺陷

执行任务较短的话，会导致执行一次更新多次页面的情况，需要解决

const onScroll = e => {
if (scheduledAnimationFrame) { return }

scheduledAnimationFrame = true
window.requestAnimationFrame(timestamp => {
scheduledAnimationFrame = false
callback()
})
}
window.addEventListener('scroll', onScroll)
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。