防抖和节流

在开发过程中，我们会碰到很多绑定持续触发的事件。例如：文本框输入，下拉加载更多等，可能会持续的触发发送请求导致服务端压力过大。这个时候，我们就要优化一下，怎么才能不要持续触发，而是给它一个“缓一缓”的时间，那么防抖和节流这个概念就出来了。

1.什么是防抖？

就是在一段时间n内，只能执行一次函数（使用定时器）。如果没到时间n，又触发事件，则清除定时器，从0开始重新计时。

（1）不立即执行函数的需求（先经过一段时间，再执行）：

function debounce ( func , wait ){
    let timer;
    return function ( ){
        let args = arguments;    //如果有参数就加上参数
        if(timer) clearTimeout (timer);
        timer = setTimeout(()=>{
            func.apply(this,args);
        },wait);    
    }
}        

（2）立即执行函数的需求（立马执行，再加定时器）：

function debounce ( func , wait ){
  let timer;
  return function(){
      let args = arguments;  //如果有参数就加上参数
      if(timer) clearTimeout(timer);
      let callNow=!timer;
      timer=setTimeout(()=>{
            timer = null;
        },wait);
        if(callNow) func.apply(this,args);
    }    
}        

2.什么是节流？

就是在相同的时间n里连续触发事件，但是只执行一次函数。节流可以稀释执行函数的次数，变成固定的频率去执行函数。

（1）用定时器来实现：

function throttle ( func , wait ){
  let timer;
  return function(){
      let args = arguments; //如果有参数就加上参数
      if(!timer){
           timer=setTimeout(()=>{
              timer = null;
              func.apply(this,args);
          },wait);
       }      
    }  
}

（2）用时间戳来实现

function throttle ( func ,wait ){
   let prev =0 ;
   return function(){
       let args = arguments;   //如果有参数就加上参数
       let now = Date.now();
       if(now - prev > wait ){
            func.apply(this,args);
            prev = now;
        }
    }
}