函数节流与函数防抖

19

概念

函数防抖(debounce)

当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间

函数节流(throttle)

预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期

函数节流(throttle)函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。

比如如下的情况:

  • window对象的resize、scroll事件
  • 拖拽时的mousemove事件
  • 文字输入、自动完成的keyup事件

区别

可以拿我们平时坐电梯为例来形象地表述二者的区别

函数防抖:如果有人进电梯(触发事件),那电梯将在10秒钟后出发(执行事件监听器),这时如果又有人进电梯了(在10秒内再次触发该事件),我们又得等10秒再出发(重新计时)。

函数节流 :保证如果电梯第一个人进来后,10秒后准时运送一次,这个时间从第一个人上电梯开始计时,不等待,如果没有人,则不运行

实现

函数防抖(debounce)

function _debounce(fn,wait){
    var timer = null;
    return function(){
        clearTimeout(timer)
        timer = setTimeout(()=>{
            fn()
        },wait)
    }
}

function _log(){
    console.log(1)
}
window.onscroll = _debounce(_log,500)

函数节流(throttle)

仔细想想,上面的防抖方式还是有一定的缺点。如果页面很长,我们一直在滚动页面,那_log方法就一直不会被执行。所以我们可以升级一下上述的防抖方法。


function _throttle(fn,wait,time){
    var previous = null; //记录上一次运行的时间
    var timer = null;

    return function(){
        var now = +new Date();

        if(!previous) previous = now;
        //当上一次执行的时间与当前的时间差大于设置的执行间隔时长的话,就主动执行一次
        if(now - previous > time){
            clearTimeout(timer);
            fn();
            previous = now;// 执行函数后,马上记录当前时间
        }else{
            clearTimeout(timer);
            timer = setTimeout(function(){
                fn();
            },wait);
        }
    }
}
function _log(){
    console.log(1)
}
window.onscroll = _debounce(_log,500,2000)

其实,这就实现了我们的函数节流。赶快打开控制台运行一下吧~

你可能感兴趣的

南小北 · 2017年07月27日

升级的「函数防抖」的已经不是防抖了,而是「函数节流」了。

「函数防抖」应用的场景是搜索框输入实时触发搜索,或者是 window 的 resize,

这时如果你一直输入,或者一直 resize,那我就一直不执行函数,是没有问题的,要的就是这个效果。

+3 回复

PARADISELIN · 2017年03月29日

函数防抖的第二个修正方法还是有点小问题的 而且场景也应该是throttle

回复

吴小粥 · 2017年12月04日

我也觉得升级的「函数防抖」的已经不是防抖了,而是「函数节流」了

回复

lao42981894zh · 3月29日

函数防抖中第一个方法: return 了一个匿名函数 浏览器控制台直接打印了

function(){
        clearTimeout(timer)
        timer = setTimeout(()=>{
            fn()
        },wait)

为什么会执行呢?

回复

0

因为window.onscroll监听的是一个函数,页面一滚动,就会执行这个函数

刘岳 · 5月31日
lao42981894zh · 3月29日

或者说为什么要加 return

回复

阿虎 · 4月13日

节流里面的 me 和 args 有啥意义?me 是window, args为空,和直接 _self() 有啥区别?

回复

刘岳 · 5月31日

也遇到这个问题,搜了下发现这篇文章的点赞和收藏都很多。但,这文章有个特别容易误导人的地方。节流是节流,防抖是防抖,文章里“函数节流(throttle)”标题下那段代码实现的是 防抖,并不是节流啊。

回复

Kell · 9月16日

什么垃圾,自己在整不明白的前提下,不要发出来误导别人行吗?

回复

载入中...