防抖和节流 - 掘金

1.防抖的应用场景

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；

1.登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖

2.调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖

3.文本编辑器实时保存，当无任何更改操作一秒后进行保存

    function debounce(fn,await){
    let timer=null;
    return function(){
        let context=this;
        let args=arguments;
        if(timer){
            clearTimeout(timer)
        }
       timer= setTimeout(()=>{fn.apply(context,args)},await)
    }
}

2.节流的应用场景

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

1.scroll 事件，每隔一秒计算一次位置信息等

2.浏览器播放事件，每隔一秒计算一次进度信息等

3.input 框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求 (也可做防抖)

  function throttle(fn,await){
    let prev=Date.now();
    return function(){
        let context=this;
        let args=arguments;
        let now=Date.now();
        if((now-prev)>delay){
            fn.apply(context,args);
            prev=Date.now();
        }
    }
}

   function throttle(fn,await){
    let timer=null;
    return function(){
        let context=this;
        let args=arguments;
        if(!timer){
           timer=setTimeout(function(){
               fn.apply(context,args);
               timer=null;
           },await)
        }
    }
}