简单理解下防抖，节流咋回事？

1.首先聊下什么是防抖，什么是节流，在什么场景下会用到。

防抖：防抖是控制次数，指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。（避免事件短时间内频繁触发）

常见应用场景：

• 监听浏览器滚动事件，返回当前滚条与顶部的距离
• 浏览器窗口大小改变时，只需窗口调整完后，再执行 resize 事件中的代码，防止重复渲染。
  ...

代码开撸

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) //取消当前的计时，重新开始计时
            timer = setTimeout(fn,delay) 
        }else{
            timer = setTimeout(fn,delay) // 当前并没有在计时，那么就开始一个计时
        }
    }
}

节流：是控制频率,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

代码开撸

• 搜索框搜索实时输入内同。只需用户最后一次输入完，再发送请求；
• 用户名、手机号、邮箱输入验证；

function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //此时间内休息，不干活
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态标识设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}

总结：

• 持续触发情况下，理论上防抖函数中的需要执行的事件函数就不会执行

• 持续触发情况下，节流函数会按设定时间周期执行