防抖\节流

防抖

场景：比如一些按钮避免用户点击太快，发送了多次请求，需要防抖

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

代码：

function debounce(fn, wait) { 
    let timer; 
    return (...args) => { 
        clearTimeout(timer); 
        timer = setTimeout(() => { fn(); }, wait);
       };
 }

使用：
window.onresize = debounce( ()=> { console.log("resize");}, 500);

节流

场景：比如浏览器播放事件，每秒都计算一次进度

节流的概念：高频事件触发，但在n秒内只会执行一次，节流会稀释函数的执行频率

代码：

function throttle(fn, wait) {
    let timer
    return ()=>{
        if(!timer){
            return
        }
        timer = setTimeout(() => { fn(); timer=undefine}, wait);
    }
}

使用：
window.onresize = throttle( ()=> { console.log("resize");}, 500);