javascript函数的节流[throttle]与防抖[debounce](2)

通过以上的函数，我们就可以做到节流的效果，在规定的每300毫秒触发一次，当然时间可以自定义，根据需求来；

防抖[debounce ]

写代码之前，我们先清楚一下防抖的概念，不知道大家有没有做过电脑端两边悬浮广告窗口的这么一个东西，当我们拖动滚动条的时候，两边的广告窗口会因为滚动条的拖动，而不断的尝试着去居于中间，然后你就会看到这两个窗口，不停的抖啊抖；

一般这种就叫抖动了，我们要做的就是防止这种抖动，称为防抖[debounce ]；

那这里防抖思想就是当我们拖动完成之后，两边的窗口位置再重新去计算，这样，就会显得很平滑，看着很舒服了，最主要的操作DOM结构的次数就大大减少了；

优化了页面性能，降低了内存消耗，不然你像IE这种比较老点版本的浏览器，说不定就直接给你蹦了

用书面一点的说法就是，在某个事件没有结束之前，函数不会执行，当结束之后，我们给定延时时间，然他在给定的延时时间之后再去执行这个函数，这就是防抖函数；

来看代码：

//将上面的throttle函数替换为debounce函数;
function debounce(method,time){
 var timer = null ;
 return function(){
  var context = this;
  //在函数执行的时候先清除timer定时器;
  clearTimeout(timer);
  timer = setTimeout(function(){
   method.call(context);
  },time);
 }
}

思路就是在函数执行之前，我们先清除定时器，如果函数一直执行，就会不断的去清除定时器中的方法，知道我们操作结束之后，函数才会执行；

其实书写的方式有很多，主要还是思路的问题，大家写的多了，自然就知道了；

用途

1. 当我们做keyup像后台请求检验的时候，可以使用防抖函数，不然我们每按一次键盘就请求一次，请求太频繁，这样当我们结束按键盘的时候再去请求，请求少很多了，性能自然不用说；
2. resize 窗口大小调整的时候，我们可以采用防抖技术也可以使用节流；
3. mousemove 鼠标移动事件我们既可以采用防抖也可以使用节流；
4. scroll 滚动条触发的事件，当然既可以采用防抖也可以采用节流；
5. 连续高频发的事件都可以采用这两种方式去解决，优化页面性能；

具体的采用哪一种更较为合适，主要还是看你的业务需求，好了，本篇就到这里了，感谢大家阅读；希望对大家的学习有所帮助，也希望大家多多支持黑区网络。