原生JS节流器实现和requestAnimationFrame()节流器实现

前言

计时器setTimeout()和定时器setInterval()长期以来是JavaScript动画最先进的工具，但是这两者都是在同步代码执行之后,经过给定的延迟后,把任务加入到宏任务队列中， 对于其执行重绘时序，却没有相应的方法，因此Firefox4为其浏览器添加了一个叫requestAnimationFrame()的方法，目前基本得到各大浏览器的支持。

节流器的基本思想是在使得进入任务队列的方法执行完毕之后（或者一定时间后）才允许继续向任务队列加入相同的任务

• 使用setTimeout()

	var flag = true;
    function animation() {
        console.log("scroll");
        setTimeout(() => flag = true, 1000)
    }
    window.addEventListener("scroll", () => {
        if (flag) {
            flag = false
            animation()

        }
    })

• 使用request AnimationFrame()

	var flag = true;
    function animation() {
        console.log("scroll");
    }
    window.addEventListener('scroll', () => {
        if (flag) {
            flag=false
            window.requestAnimationFrame(animation);
            setTimeout(() => flag = true, 1000)
        }
    })