防抖 debounce

是函数在特定的时间内不被再调用后执行。如果n秒内高频事件再次被触发，则重新计算时间。

事件场景：

1）点击按钮事件

2）输入框的自动保存事件

3）浏览器resize事件

示例：

function debounce(fun,wait){
    let timer;
    return (...args)=>{
        if (timer){
            clearTimeout(timer);
        }
        timer = setTimeout(()=>{
            fun(...args);
        },wait)
    }
}
window.onresize = debounce(()=>{
    console.log(1);
},1000);
//页面在频繁resize的时候，控制台也只会打印一次1

节流 throttle

是确保函数特定的时间内至多执行一次。

事件场景

1）scroll事件，滚动的过程中每隔一段时间触发事件。

//利用时间间隔实现
function throttle1(fun,wait){
    let time1 = 0;
    return (...args)=>{
           const time2 = Date.now()
        const timeInterval = time2 - time1;
         if ( timeInterval < wait){
             return 
         }else {
            time1 = time2;
            fun(...args);
        }
    }
}
window.onresize = throttle1(()=>{
    console.log(1);
},1000);
//页面在频繁resize的时候，控制台会每隔1秒打印一次

//利用定时器实现
function throttle2(fun,wait){
    let timer;
    return (...args)=>{
        if (timer){
            return
        }else {
            timer = setTimeout(()=>{
                timer = null;
                fun(...args);
            },wait);
        }
    }
}
window.onresize = throttle2(()=>{
    console.log(1);
},1000);
//页面在频繁resize的时候，控制台会每隔1秒打印一次