防抖跟节流的介绍

防抖(debounce)：触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

节流(throttle)：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效

实现一个防抖函数

function debounce(fn, await) {
    let timer;
    
    return function () {
        let args = [...arguments];
        let that = this;
        
        if (timer) {
            clearTimeout(timer);
        }
        
         timer = setTimeout(function () {
             fn.apply(that, args);
         }, await);
    };
}

在线测试

实现一个节流函数

function throttle(fn, wait) {
    let timeLast = 0;
    
    return function() {
        let that = this;
        let arg = [...arguments];
        let timeNow = new Date().getTime();
      
        if (timeNow - timeLast >= wait) {
            fn.apply(that, arg);
            timeLast = timeNow;
        }
    }
}

在线测试

总结

防抖：规定时间之后执行函数

节流：规定时间之内只执行一次函数

参考文献