概述
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)
