防抖与节流

————— --- --- ——————

防抖与节流

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

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

函数去抖（debounce）：让一个函数在一定间隔内没有被调用时，才开始执行被调用方法。
两个方法都是用来提升前端性能，减轻浏览器压力。

防抖(Debouncing)

像防抖还是很容易想到的，大概意思就是延时处理，然后如果在这段延时内又触发了事件，则重新开始延时。

    // 简单示例
    
    window.addEventListener('resize',function(e){
        var t;
        return function(){
            if(t) clearTimeout(t);
            t = setTimeout(function(){
                // do something...
            },500);
        }
    }());
        

节流（throttle）

为什么要函数节流

以下场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。

• window对象的resize、scroll事件

• 拖拽时的mousemove事件

• 射击游戏中的mousedown、keydown事件

• 文字输入、自动完成的keyup事件

// 简单的节流函数
function throttle(func, wait, mustRun) {
    var timeout,
    startTime = new Date();

    return function() {
        var context = this,
        args = arguments,
    curTime = new Date();

    clearTimeout(timeout);

例子以scroll事件进行解析

window.onscroll =  function(){
      lazyload();
      //throttle(lazyload,window);
 };
     function lazyload(){
     console.log("scroll执行了"+scrollnum);
}

我们的本意只是让鼠标滚动一次执行一次滚动函数，但是window的onscroll函数并不是等scroll结束之后才会调用，鼠标滚动或拖动滚动条，就会不停的触发scroll事件，如果处理的东西多，低版本的IE也会陷入假死状态。

解决办法

debounce

抖动：如果用手指一直按住一个弹簧，它将不会弹起直到你松手为止。 也就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。这种比较适合window的resize事件，实际需求大多为停止改变大小n毫秒后执行后续处理；而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了和throttle两种解决办法。

去抖

 window.onscroll =  function(){
     //lazyload();
     debounce(lazyload,window);
 };
 function debounce(method,context){
    clearTimeout(method.timeout);
    method.timeout = setTimeout(function(){
          method.call(context);
    },500);
 } 
 function lazyload(){
 console.log("scroll执行了"+scrollnum);
  }

效果如下，可以看出只执行了一次lazyload函数：

节流之后的滚动一次的执行效果

利用定时器，让函数执行延迟500毫秒，在500毫秒内如果有函数又被调用则删除上一次调用，这次调用500毫秒后执行，如此往复

去抖

还有一种节流方式，是通过返回闭包的形式，可以设置延迟时间，两者运行的结果是一样，但是我在实际操作的时候设置延迟500时，滚动过了一会才执行了,设置为delay为100的时候在视觉上就没有感觉延迟。而且函数也只滚动了一次。

function debounce1(method,delay){

 var timer = null;
 return function(){
     var context = this,args = arguments;
     clearTimeout(timer);
     timer = setTimeout(function(){
         method.apply(context,args);
     },delay);
   }
 }

————— --- --- ——————

上图为个人案例仿京东幽灵菜单 需要的亲们 可以留言 ……