JavaScript 高级系列之节流 [throttle] 与防抖 [debounce]

1、概念

这两个东西都是为了项目优化而出现的，官方是没有具体定义的，他们的出现主要是为了解决一些短期内连续执行的事件带来性能上的不佳和内存的消耗巨大等问题；
像这类事件通常像 scroll keyup mousemove resize等等，短期内不断的触发，在性能上消耗是很是大的，尤为是一些改变DOM结构的操做；

节流[throttle]与防抖[debounce]很是类似，都是让上述这类事件在规定的事件从不断的去触发更改为为规定的时间内触发多少次；

节流[throttle]

节流通俗来解释就好比咱们水龙头放水，阀门一打开，水哗哗的往下流，这个秉着勤俭节约的优良传统美德，咱们要把水龙头关小点，最好是如咱们心意按照必定规律在某个时间间隔内一滴一滴的往下滴，这，，，好吧这就是咱们节流的概念；
换成函数来讲，使用setTimeout方法，给定两个时间，后面的时间减去前面的时间，到达咱们给定的时间就去触发一次这个事件，这么说太笼统的，咱们看下面的函数，这里咱们以【scroll】为例；

/** 样式我就顺便写了 **/
<style> *{padding:0;margin:0;} .scroll-box{ width : 100%; height : 500px; background:blue; overflow : auto; } .scroll-item{ height:1000px; width:100%; } </style>

------------------------

/** 先给定DOM结构;**/
<div class="scroll-box">
    <div class="scroll-item"></div>
</div>

------------------------

/**主要看js,为了简单我用JQ去写了**/
<script> $(document).ready(function(){ var scrollBox = $('.scroll-box'); //调用throttle函数，传入相应的方法和规定的时间; var thro = throttle(throFun,300); //触发事件; scrollBox.on('scroll' , function(){ //调用执行函数; thro(); }) // 封装函数;  function throttle(method,time){ var timer = null; var startTime = new Date(); return function(){ var context = this; var endTime = new Date(); var resTime = endTime - startTime; //判断大于等于咱们给的时间采起执行函数; if(resTime >= time){ method.call(context); //执行完函数以后重置初始时间，等于最后一次触发的时间 startTime = endTime; } } } function throFun(){ console.log('success'); } }) </script>复制代码

经过以上的函数，咱们就能够作到节流的效果，在规定的每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. 连续高频发的事件均可以采用这两种方式去解决，优化页面性能；

具体的采用哪种更较为合适，主要仍是看你的业务需求，好了，本篇就到这里了，感谢你们阅读；

---

手打不易，总结不易，转载请注明出处，感谢；