函数节流和函数防抖

函数节流与函数防抖是我们解决频繁触发DOM事件的两种常用解决方案，但是经常傻傻分不清楚。本章内容对两者区别展开描述：

首先思考三个问题：

　　1. 函数节流和函数防抖是什么东东？

　　2. 为什么要使用函数节流和函数防抖？

　　3. 如何实现函数节流和函数防抖？

 

基本思想：某些代码不可以在没有间断的情况连续重复执行。

使用原因：DOM操作比起非DOM交互，需要更多的内存和CPU时间，连续尝试过多的DOM操作可能会导致浏览器挂起，甚至崩溃。

应用场景：只要代码是周期执行的，都应该节流。鼠标移动mousemove事件、滚动条滚动scroll事件，浏览器窗口改变resize事件等。

 

生活中物体对两者形象的描述：

　　函数节流（throttle）：一个水龙头在滴水，可能一次性会滴很多滴，但是我们只希望它每隔 500ms 滴一滴水，保持这个频率。即我们希望函数在以一个可以接受的频率重复调用。

　　函数防抖（debounce）：将一个弹簧按下，继续加压，继续按下，只会在最后放手的一瞬反弹。即我们希望函数只会调用一次，即使在这之前反复调用它，最终也只会调用一次而已。

 

两者比较：

　　由于节流在resize中是最常用的，所以我们基于该事件来改变页面布局进行两者的比较。　

window.onresize = function() {  
      var div = document.getElementById('mydiv')
      div.style.height = div.offsetWidth + 'px'
      console.log('resize')
}

　　不停的改变窗口大小，观察打印结果。。。。

　　很明显，用户如果不断放大缩小浏览器窗口，那我们监听函数将会不停的被调用，倘若函数过“重”，即假设如上文描述的一般，那么对浏览器的压力将会非常之大，其高频率的更改可能会让浏览器崩溃。

 

　　函数防抖（debounce）将若干函数调用合成为一次，并在给定时间过去之后，或者连续事件完全触发完成之后，调用一次(仅仅只会调用一次！

　　　　　　　　　　　　 如下函数防抖的思想，不论用户如何放大缩小，在他结束的的那一刻才进行我们的方法调用即可

　　

function debounce(fn) {  
    var timer  var _self = fn  return function() {
        clearTimeout(timer)；
        var args = arguments； // fn所需要的参数
        var _me = this； // 当前的this
        timer = setTimeout(function() {
              _self.call(_me, args)
        }, 200)；
  }
}

function resizeDiv() {  
    var div = document.getElementById('mydiv')；
      div.style.height = div.offsetWidth + 'px'；
      console.log('resize')；
}

window.onresize = debounce(resizeDiv)；

　　触发事件，查看和之间的比较，确实解决了那个问题，但是，

　　放手之后这里才变化，显得有点突兀，那么能不能在我拖动的时候不能也让它变化同步呢？？？

 

　　函数节流（throttle）当达到了一定的时间间隔就会执行一次；可以理解为是缩减执行频率；

　　　　　　　　　　     函数节流（throttle）可以优化用户体验，如我们需要用户在 resize 浏览器窗口的过程中，height 与 width 也能保持一致，时刻触发函数（函数防抖（debounce）肯定是不可以的，所以需要优化频率。

　　　　　　　　　　    控制好处理频率，可以确保浏览器不会在极短的时间内进行过多次的计算。

　　函数节流代码如下:

function resizeDiv(){
    var div = document.getElementById('myDiv')
    div.style.height = div.offsetWidth + "px";
}
function throttle(method){
    clearTimeout(method.tid);
    method.tid = setTimeout(x=>{
        method.call();
    },100)
}
window.onresize = function(){
    throttle(resizeDiv)
}