函数节流与函数防抖

27

概念

函数防抖(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)

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

你可能感兴趣的

10 条评论
南小北 · 2017-07-27

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

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

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

+4 回复

PARADISELIN · 2017-03-29

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

回复

吴小粥 · 2017-12-04

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

回复

lao42981894zh · 2018-03-29

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

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

为什么会执行呢?

回复

0

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

lao42981894zh · 2018-03-29

或者说为什么要加 return

回复

阿虎 · 2018-04-13

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

回复

道哥什么都不知道 · 2018-05-31

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

回复

微醺岁月 · 5月8日

我敢说作者自己都没弄懂节流和防抖,这篇文章更像是自己学习和拼凑的流水账记录,代码也是有问题的,我最先也被误导了。
防抖就是停止操作延迟多久执行回调函数,最简单的例子就是输入框打字搜索查人,如果不用防抖(debounce)函数限制,试想一下,打一个字调一次接口,如果打字速度非常快,就会频繁的调用接口,一个是服务端的开销会增加,二是前端的体验非常不好,下拉框的数据一直在更新,所以就造成了“抖动”。我们想要的效果就是用户不打字时候我们才调用一次搜索查人的接口,那么我们怎么判定用户不再打字了,这时候就是防抖(debounce)函数的精髓延迟多久,如果距离用户敲击键盘 0.5 秒之后输入框不在变化,我们就认为用户打字完毕,如果用户一直在打字,我们就一直重置这个时间,再来对比节流(throttle)函数,为什么不用节流,节流函数的核心就是多久执行一次,假设节流时间是 1 s, 意思就是不管用户是否还在打字,一开始开始会调用搜人接口,过了一秒又会调用一次搜人接口,明显不符合应用场景。

一言以蔽之: 就交互场景而已~
throttle 像是按钮的冷却时间,防止用户疯狂点击按钮提交表单不断的调用接口,我们限制 2 秒才发一次请求,不管你点击多少次;
debounce 像是搜索框的查询,等待用户完成操作再执行,避免打字期间就不断的查询。

回复

微醺岁月 · 5月8日

自己实现的防抖和节流,仅供参考

function throttle(fn, interval) {
  let firstTime = true;
  let timer;
  return function() {
    let args = arguments;
    if (firstTime) {
      fn.apply(this, args);
      return (firstTime = false);
    }

    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      clearTimeout(timer);
      timer = null;
      fn.apply(this, args);
    }, interval);
  };
}

window.onscroll = throttle(function() {
  console.log('500毫秒触发一次');
}, 500);

// 函数防抖,延迟多久执行一次
function debounce(fn, interval) {
  let timer = null;
  let prevTime = null; // 记录上一运行的时间

  return function() {
    const now = Date.now();
    let args = arguments;
    if (now - prevTime > interval && prevTime) {
      clearTimeout(timer);
      fn.apply(this, args);
      prevTime = null;
    } else {
      clearTimeout(timer);
      prevTime = now;
      timer = setTimeout(() => {
        fn.apply(this, args);
        prevTime = Date.now();
      }, interval);
    }
  };
}

window.onclick = debounce(function() {
  console.log('3秒之内再点击重新计时');
}, 3000);

回复

载入中...