Contents

1. 1. 什么是防抖和节流
2. 2. 函数防抖
3. 3. 函数节流
4. 4. 函数防抖和函数节流的对比
   1. 4.0.1. 何时使用函数防抖，何时使用函数节流？

5. 传递事件对象

什么是防抖和节流

举个例子，比如在进行百度搜索时，是等待用户时输入完成之后，才会在搜索框下显示，搜索内容，而不是当输入未完成的状态下进行搜索（这样会消耗大量的服务器资源）。

函数防抖

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

• 函数执行过一次后，在规定时间内不能再执行，否则推迟函数执行
• 下一次函数调用时，将清楚上一次定时器，并且使用setTimeout 重新计时

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

<input type="text" id="input">
<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>

函数节流

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

• 函数在规定时间内最多执行一次
• 下一次函数调用将清楚上一次的定时器
  • 若函数执行的时间间隔 <= 规定时间间隔，则使用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>

---

函数防抖和函数节流的对比

不管是函数节流还是函数防抖，减少的都是事件处理程序的调用频率，而不是时间的调用频率

何时使用函数防抖，何时使用函数节流？

• 当我们只需要处理最后一次触发事件时，用函数防抖。（例如：窗口大小变化，并不需要计算中间变化的过程，只需要窗口大小改变完成后的值）
• 当事件触发过于频繁，我们需要限制事件处理程序的调用频率时，用函数节流

传递事件对象

当我们使用节流函数或者防抖函数封装事件处理程序时，需要注意两个问题：

• 事件对象的传递
• this 的指向

参考文献
参考文献