防抖和节流

防抖：触发高频事件后n秒内函数只执行一次，如果n秒内高频事件再次触发，则重新计算时间

思路： 每次触发事件时都取消之前的延时调用方法

function debounce(fun,wait){
    let timer;
    return (...args)=>{
        if (timer){
            clearTimeout(timer);
        }
        timer = setTimeout(()=>{
            fun(...args);
        },wait)
    }
}
window.onresize = debounce(()=>{
    console.log(1);
},1000);

 

 

 

 

节流：高频事件n秒内触发多次，只执行其中的一次，所以 节流会稀释函数的执行频率
思路：每次触发事件时都判断当前是否有等待执行的延时函数

//利用时间间隔实现
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秒打印一次
            

 

结合应用场景  （https://www.cnblogs.com/ympjsc/p/11813691.html）

　　防抖(debounce)

　　　　search搜索联想，用户在不断输入值时，用防抖来节约请求资源。

　　　　window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

　　节流(throttle)

　　　　鼠标不断点击触发，mousedown(单位时间内只触发一次)

　　　　监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

详细内容解析：https://github.com/mqyqingfeng/Blog/issues/22