函数节流和函数防抖

写在前面

在前端开发中，我们知道对于DOM的频繁操作是非常消耗资源的，尤其是对于浏览器的onresize，onscroll事件进行响应去操作DOM元素的时候，有时候会看到浏览器卡顿，用户体验非常不好。但是我们又要监听浏览器的onresize，onscroll事件，这时候函数节流（throttle）和函数防抖（debounce）就发挥作用了。

函数节流原理

对于连续触发的事件，我们通过设置一个定时器，让其在过了特定时间t1后触发，如果在t1时间内再次触发了该事件，则清除上一次计时器，重新计时，等待新计时时间的到来。

函数节流的实现

下面一个例子，通过函数节流实现document.body的缩放，在缩放过程中不会触发自定义的函数，只有当停止缩放的时候才会执行函数：

var throttle = {

  timeId:null,

  zoomBody: function(){

       //逻辑代码...

        console.log(99999);

  },
  zoomHandle: function(timeInternal){

    clearTimeout(this.timeId);

    this.timeId = setTimeout(this.zoomBody);

  }

}

document.body.onresize = function(){

  throttle.zoomHandle(500);

}

以上代码只有在停止缩放时才会触发自定义的throttle.zoomBody函数。有时候这种方式并不能满足需求，比如用户在拖拽浏览器窗口时，去动态响应某个控件的宽度/高度，而不是等到停止拖动时才去自适应窗口。此时我们可以使用函数防抖的功能。

函数防抖原理

函数防抖是在函数节流的基础上，每隔固定的时间，不管定时器触发没触发，都会执行一遍自定义函数。

函数防抖的实现

var throttle = {

  timeId:null,

  startTime: new Date(),

  zoomBody: function(){

                            //逻辑代码...                           

                             console.log(99999);

  },

  zoomHandle: function(timeInternal,maxInternal){

    clearTimeout(this.timeId);

    var cur = new Date();

    if(cur - this.startTime > maxInternal){

      this.zoomBody();

      this.startTime = cur;

    }else{

      this.timeId = setTimeout(this.zoomBody,timeInternal);

    }

  }

}

document.body.onresize = function(){

  throttle.zoomHandle(500,2000);

}

以上代码，在缩放过程中，每隔2秒执行一次throttle.zoomBody函数，避免了等待停止缩放才执行的弊端。

总结

函数防抖的合理应用能够帮助我们充分节省cpu，内存等资源，同时又通过一定的时延间隔去执行自定义函数，在一些频繁的DOM操作，http请求应用中有效提升用户体验。