防抖（debounce）&& 节流（throttle）

在绑定 scroll 、resize 这类事件时，当它发生时，它被触发的频次非常高，间隔很近。如果事件中涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成，就会造成浏览器掉帧。加之用户鼠标滚动往往是连续的，就会持续触发 scroll 事件导致掉帧扩大、浏览器 CPU 使用率增加、用户体验受到影响。
 

函数防抖
规定函数至少间隔多久执行。

函数执行过一次后，在n秒内不能再次执行，否则推迟函数执行
下一次函数调用将清除上一次的定时器，并用setTimeout重新计时

其实就是利用的时间间隔。当事件触发时间间隔很短时，就认为用户操作还未完成，推迟事件处理程序的执行。
 

<input type="text" id="gl">
<script>
    // 简单的防抖动函数
    function debounce(func, wait) {
        let timeout;  // 定时器变量
        return function() {
            clearTimeout(timeout);  // 每次触发时先清除上一次的定时器,然后重新计时
            timeout = setTimeout(func, wait);  // 指定 xx ms 后触发真正想进行的操作 handler
        };
    }
    //事件处理程序
    function realFunc(){
        console.log("Success");
    }

    const input = document.getElementById('input');
    input.addEventListener('keydown',debounce(realFunc,500));
    //input.addEventListener('keydown',realFunc);
</script>

函数节流

规定函数在某时间段内最多执行一次

• 函数在n秒内最多执行一次
• 下一次函数调用将清除上一次的定时器
  • 若函数执行的时间间隔小于等于规定时间间隔则用setTimeout在规定时间后再执行
  • 若函数执行的时间间隔大于规定时间间隔则执行函数，并重新计时

<script>
    //节流函数
    function throttle(func,interval){
        let timeout;
        let startTime = new Date();
        return function (){
            clearTimeout(timeout);
            let curTime = new Date();
            if(curTime - startTime <= interval){
                //小于规定时间间隔时，用setTimeout在指定时间后再执行
                timeout = setTimeout(()=>{
                    func();
                },interval)
            } else {
                //重新计时并执行函数
                startTime = curTime;
                func()
            }
        }
    }
    //事件处理程序
    function realFunc(){
        console.log('success')
    }
    window.addEventListener('scroll',throttle(realFunc,100));
    //window.addEventListener('scroll',realFunc);
</script>

 总结

不管是函数节流还是函数防抖，我们减少的是事件处理程序的调用频率，而不是事件的调用频率。每次滚动、每次输入都会触发事件。