requestAnimationFrame

requestAnimationFrame 定义

requestAnimationFrame是HTML5的新特性，区别于setTimeout和setInterval。requestAnimationFrame比后两者精确，采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。

requestAnimationFrame 使用

基本使用

requestAnimationFrame(() => {
    console.log('基本使用')
})

此时会在下次浏览器刷新的时候打印 基本使用

取消事件

const animationFrame = requestAnimationFrame(() => {
    console.log('取消事件')
})

cancelAnimationFrame(animationFrame)

cancelAnimationFrame 方法会取消还没发生的事件函数的执行，但是一般都等不到那时候。

循环调用

const callback = () => {
    console.log('循环调用')
    requestAnimationFrame(callback)
}

requestAnimationFrame(callback)

在需要循环调用的函数中通过递归的方式实现循环调用