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)