防抖和节流代码实现

防抖和节流

含义：防抖（Debounce）和节流（throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似而又不同。

函数节流（throttle）：是让一个函数无法在很短的时间间隔内连续调用，当上一次函数执行后过了规定的时间间隔，才能进行下一次该函数的调用。

函数去抖（debounce）：让一个函数在一定间隔内没有被调用时，才开始执行被调用方法。
作用：性能优化（控制触发频率，或者执行次数）

• 防抖

  实现思路：当事情发生的时候，不直接执行事件处理函数，而且去开启一个定时器，开始等待计数（30ms),如果在计数过程中，又触发了事件，停止当前定时，从新开始计数
  
  function debounce(fun,wait){
  	var timer;
      return function(){ 
          //如果在计数过程中，又触发了事件，停止当前定时，从新开始计数
          if(timer){cliearTimeout(timer)}
          timer = setTimeout(fun,wait);
          /*setTimeout(function(){
              fun();
          },wait);*/
      }
  }
  

• 节流

  function throttle(fun, wait) {
      var timer;  //开   timer=undefined
      return function () {
          if (!timer) { //判断timer是否有值（当前是否已经开启了定时器） ，
              timer = setTimeout(function () { //关
                  fun();
                  timer = undefined; //开
              }, wait)
          }
      }     
  }
  

• 防抖和节流的区别

  • 防抖：高频率触发事件，只执行一次
  • 节流：高频率触发事件，按一定的频率执行，隔一会执行一次