10分钟清楚地知道防抖和节流以及它们的区别

防抖：触发高频事件后n秒内事件处理函数只会执行一次，如果n秒内事件再次被触发，则重新倒计时。最典型的一个例子就是电梯关门，假设电梯开门后20秒后关门，如果在关门的时候再次触发了开门事件，则电梯会重新从20秒开始倒计时关门时间。

应用：比如鼠标滚轮事件，每次鼠标滚动都会触发一次事件，但是只有鼠标滚轮停下后n秒后才会真正触发最后的事件处理

// 防抖实现
function debounce(func){
    let t = null;
    return function(){
        // 每一次触发都清除和重新设立计时器
        // 因此被高频触发的事件只执行最后一次触发的事件的处理
        clearTimeout(t);
        t = setTimeout(()=>{
            func.apply(this, arguments);
        },500)
    }
}

function debounceHandler () { /*do something here*/ }

window.addEventListener("scroll",debounce(debounceHandler));

节流：被高频触发的事件，在n秒内一定会且只会执行一次

应用：例如（在服务器不行的时候）搜索框的关键词提示搜索在一定时间内只提示一次

// 节流实现
function throttle(func){
    // 设置专属的函数执行状态管理
    let isRunning = false;
    return function(){
        // 如果已经有计时器在执行了就不执行事件处理
        if(isRunning) return;
        // 在设置计时器之前更改函数的执行状态
        isRunning = true;
        // 设置计时器开始延时执行事件处理函数
        setTimeout(()=>{
            func.apply(this, arguments);
            // 事件处理函数执行完毕后重置函数执行状态
        	isRunning = false;
        },500);
    }
}

function throttleHandler(){/*do something here*/}

window.addEventListener("resize",throttle(throttleHandler));

区别：

• 防抖在多次（频繁）触发事件时，只会执行最后一次触发，不停止触发事件的行为就不会执行事件处理
• 节流在多次（频繁）触发事件时，能保证在指定时间内一定会且只会触发一次