防抖与节流

搜狗搜到你

————— --- 图片描述 --- ——————

防抖与节流

防抖(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);
   }
 }

————— --- 图片描述 --- ——————

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

阅读 8.8k

码农大本营
分享 前沿技术 基础知识, 分享 流行的技术走向。

“工欲善其事,必先利其器”。 思考、书籍和社会实践使我不断走向成熟,对知识的渴望,对理想的追求,人际...

522 声望
31 粉丝
0 条评论

“工欲善其事,必先利其器”。 思考、书籍和社会实践使我不断走向成熟,对知识的渴望,对理想的追求,人际...

522 声望
31 粉丝
文章目录
宣传栏