使用requestAnimationFrame实现节流

使用requestAnimationFrame实现节流

requestAnimationFrame方法接收一个参数，此参数是一个要在重绘屏幕前调用的函数。
这个函数就是修改DOM样式以及反映下一次重绘有什么变化的地方。

标记位 每50ms触发一次

let enabled = true
function expensionFunction() {
  console.log('exec!')
}
window.addEventListener('scroll', () => {
    if (enabled) {
        enabled =false
        window.requestAnimationFrame(expensionFunction)
        // 每50ms触发一次，提高性能
        setTimeout(() => enabled =true, 50)
    }
})

cancelAnimationFrame

与setTimeout类似，requestAnimationFrame 也返回一个ID，可以用于通过cancelAnimationFrame来取消任务

下面的例子表示：刚把一个任务加入队列，然后立即取消这个任务

let requestId = window.requestAnimationFrame(() => {
    console.log('requestAnimationFrame')
})

window.cancelAnimationFrame(requestId)