【进阶 7-2 期】深刻浅出防抖函数 debounce

更新：谢谢你们的支持，最近折腾了一个博客官网出来，方便你们系统阅读，后续会有更多内容和更多优化，猛戳这里查看

------ 如下是正文 ------

引言

上一节咱们认识了节流函数 throttle，了解了它的定义、实现原理以及在 underscore 中的实现。这一小节会继续以前的篇幅聊聊防抖函数 debounce，结构是同样的，将分别介绍定义、实现原理并给出了 2 种实现代码并在最后介绍在 underscore 中的实现，欢迎你们拍砖。

有什么想法或者意见均可以在评论区留言，下图是本文的思惟导图，高清思惟导图和更多文章请看个人 Github。

定义及解读

防抖函数 debounce 指的是某个函数在某段时间内，不管触发了多少次回调，都只执行最后一次。假如咱们设置了一个等待时间 3 秒的函数，在这 3 秒内若是遇到函数调用请求就从新计时 3 秒，直至新的 3 秒内没有函数调用请求，此时执行函数，否则就以此类推从新计时。

举一个小例子：假定在作公交车时，司机需等待最后一我的进入后再关门，每次新进一我的，司机就会把计时器清零并从新开始计时，从新等待 1 分钟再关门，若是后续 1 分钟内都没有乘客上车，司机会认为乘客都上来了，将关门发车。

此时「上车的乘客」就是咱们频繁操做事件而不断涌入的回调任务；「1 分钟」就是计时器，它是司机决定「关门」的依据，若是有新的「乘客」上车，将清零并从新计时；「关门」就是最后须要执行的函数。

若是你还没法理解，看下面这张图就清晰多了，另外点击 这个页面 查看节流和防抖的可视化比较。其中 Regular 是不作任何处理的状况，throttle 是函数节流以后的结果（上一小节已介绍），debounce 是函数防抖以后的结果。

原理及实现

实现原理就是利用定时器，函数第一次执行时设定一个定时器，以后调用时发现已经设定过定时器就清空以前的定时器，并从新设定一个新的定时器，若是存在没有被清空的定时器，当定时器计时结束后触发函数执行。

实现 1

// 实现 1
// fn 是须要防抖处理的函数
// wait 是时间间隔
function debounce(fn, wait = 50) {
    // 经过闭包缓存一个定时器 id
    let timer = null
    // 将 debounce 处理结果看成函数返回
    // 触发事件回调时执行这个返回函数
    return function(...args) {
      	// 若是已经设定过定时器就清空上一次的定时器
        if (timer) clearTimeout(timer)
      
      	// 开始设定一个新的定时器，定时器结束后执行传入的函数 fn
        timer = setTimeout(() => {
            fn.apply(this, args)
        }, wait)
    }
}

// DEMO
// 执行 debounce 函数返回新函数
const betterFn = debounce(() => console.log('fn 防抖执行了'), 1000)
// 中止滑动 1 秒后执行函数 () => console.log('fn 防抖执行了')
document.addEventListener('scroll', betterFn)
复制代码

实现 2

上述实现方案已经能够解决大部分使用场景了，不过想要实现第一次触发回调事件就执行 fn 有点力不从心了，这时候咱们来改写下 debounce 函数，加上第一次触发当即执行的功能。

// 实现 2
// immediate 表示第一次是否当即执行
function debounce(fn, wait = 50, immediate) {
    let timer = null
    return function(...args) {
        if (timer) clearTimeout(timer)
      
      	// ------ 新增部分 start ------ 
      	// immediate 为 true 表示第一次触发后执行
      	// timer 为空表示首次触发
        if (immediate && !timer) {
            fn.apply(this, args)
        }
      	// ------ 新增部分 end ------ 
      	
        timer = setTimeout(() => {
            fn.apply(this, args)
        }, wait)
    }
}

// DEMO
// 执行 debounce 函数返回新函数
const betterFn = debounce(() => console.log('fn 防抖执行了'), 1000, true)
// 第一次触发 scroll 执行一次 fn，后续只有在中止滑动 1 秒后才执行函数 fn
document.addEventListener('scroll', betterFn)
复制代码

实现原理比较简单，判断传入的 immediate 是否为 true，另外须要额外判断是不是第一次执行防抖函数，判断依旧就是 timer 是否为空，因此只要 immediate && !timer 返回 true 就执行 fn 函数，即 fn.apply(this, args)。

增强版 throttle

如今考虑一种状况，若是用户的操做很是频繁，不等设置的延迟时间结束就进行下次操做，会频繁的清除计时器并从新生成，因此函数 fn 一直都没办法执行，致使用户操做迟迟得不到响应。

有一种思想是将「节流」和「防抖」合二为一，变成增强版的节流函数，关键点在于「 wait 时间内，能够从新生成定时器，但只要 wait 的时间到了，必须给用户一个响应」。这种合体思路刚好能够解决上面提出的问题。

给出合二为一的代码以前先来回顾下 throttle 函数，上一小节中有详细的介绍。

// fn 是须要执行的函数
// wait 是时间间隔
const throttle = (fn, wait = 50) => {
  // 上一次执行 fn 的时间
  let previous = 0
  // 将 throttle 处理结果看成函数返回
  return function(...args) {
    // 获取当前时间，转换成时间戳，单位毫秒
    let now = +new Date()
    // 将当前时间和上一次执行函数的时间进行对比
    // 大于等待时间就把 previous 设置为当前时间并执行函数 fn
    if (now - previous > wait) {
      previous = now
      fn.apply(this, args)
    }
  }
}
复制代码

结合 throttle 和 debounce 代码，增强版节流函数 throttle 以下，新增逻辑在于当前触发时间和上次触发的时间差小于时间间隔时，设立一个新的定时器，至关于把 debounce 代码放在了小于时间间隔部分。

// fn 是须要节流处理的函数
// wait 是时间间隔
function throttle(fn, wait) {
  
  // previous 是上一次执行 fn 的时间
  // timer 是定时器
  let previous = 0, timer = null
  
  // 将 throttle 处理结果看成函数返回
  return function (...args) {
    
    // 获取当前时间，转换成时间戳，单位毫秒
    let now = +new Date()
    
    // ------ 新增部分 start ------ 
    // 判断上次触发的时间和本次触发的时间差是否小于时间间隔
    if (now - previous < wait) {
    	 // 若是小于，则为本次触发操做设立一个新的定时器
       // 定时器时间结束后执行函数 fn 
       if (timer) clearTimeout(timer)
       timer = setTimeout(() => {
          previous = now
        	fn.apply(this, args)
        }, wait)
    // ------ 新增部分 end ------ 
      
    } else {
       // 第一次执行
       // 或者时间间隔超出了设定的时间间隔，执行函数 fn
       previous = now
       fn.apply(this, args)
    }
  }
}

// DEMO
// 执行 throttle 函数返回新函数
const betterFn = throttle(() => console.log('fn 节流执行了'), 1000)
// 第一次触发 scroll 执行一次 fn，每隔 1 秒后执行一次函数 fn，中止滑动 1 秒后再执行函数 fn
document.addEventListener('scroll', betterFn)
复制代码

看完整段代码会发现这个思想和上篇文章介绍的 underscore 中 throttle 的实现思想很是类似。

underscore 源码解析

看完了上文的基本版代码，感受仍是比较轻松的，如今来学习下 underscore 是如何实现 debounce 函数的，学习一下优秀的思想，直接上代码和注释，本源码解析依赖于 underscore 1.9.1 版本实现。

// 此处的三个参数上文都有解释
_.debounce = function(func, wait, immediate) {
  // timeout 表示定时器
  // result 表示 func 执行返回值
  var timeout, result;

  // 定时器计时结束后
  // 一、清空计时器，使之不影响下次连续事件的触发
  // 二、触发执行 func
  var later = function(context, args) {
    timeout = null;
    // if (args) 判断是为了过滤当即触发的
    // 关联在于 _.delay 和 restArguments
    if (args) result = func.apply(context, args);
  };

  // 将 debounce 处理结果看成函数返回
  var debounced = restArguments(function(args) {
    if (timeout) clearTimeout(timeout);
    if (immediate) {
      // 第一次触发后会设置 timeout，
      // 根据 timeout 是否为空能够判断是不是首次触发
      var callNow = !timeout;
      timeout = setTimeout(later, wait);
      if (callNow) result = func.apply(this, args);
    } else {
    	// 设置定时器
      timeout = _.delay(later, wait, this, args);
    }

    return result;
  });

  // 新增 手动取消
  debounced.cancel = function() {
    clearTimeout(timeout);
    timeout = null;
  };

  return debounced;
};

// 根据给定的毫秒 wait 延迟执行函数 func
_.delay = restArguments(function(func, wait, args) {
  return setTimeout(function() {
    return func.apply(null, args);
  }, wait);
});
复制代码

相比上文的基本版实现，underscore 多了如下几点功能。

• 一、函数 func 的执行结束后返回结果值 result
• 二、定时器计时结束后清除 timeout，使之不影响下次连续事件的触发
• 三、新增了手动取消功能 cancel
• 四、immediate 为 true 后只会在第一次触发时执行，频繁触发回调结束后不会再执行

小结

• 函数节流和防抖都是「闭包」、「高阶函数」的应用

• 函数节流 throttle 指的是某个函数在必定时间间隔内（例如 3 秒）执行一次，在这 3 秒内 无视后来产生的函数调用请求

  • 节流能够理解为养金鱼时拧紧水龙头放水，3 秒一滴
    • 「管道中的水」就是咱们频繁操做事件而不断涌入的回调任务，它须要接受「水龙头」安排
    • 「水龙头」就是节流阀，控制水的流速，过滤无效的回调任务
    • 「滴水」就是每隔一段时间执行一次函数
    • 「3 秒」就是间隔时间，它是「水龙头」决定「滴水」的依据
  • 应用：监听滚动事件添加节流函数后，每隔固定的一段时间执行一次
  • 实现方案 1：用时间戳来判断是否已到执行时间，记录上次执行的时间戳，而后每次触发后执行回调，判断当前时间距离上次执行时间的间隔是否已经达到时间差（Xms） ，若是是则执行，并更新上次执行的时间戳，如此循环
  • 实现方案 2：使用定时器，好比当 scroll 事件刚触发时，打印一个 hello world，而后设置个 1000ms 的定时器，此后每次触发 scroll 事件触发回调，若是已经存在定时器，则回调不执行方法，直到定时器触发，handler 被清除，而后从新设置定时器

• 函数防抖 debounce 指的是某个函数在某段时间内，不管触发了多少次回调，都只执行最后一次

  • 防抖能够理解为司机等待最后一我的进入后再关门，每次新进一我的，司机就会把计时器清零并从新开始计时
    • 「上车的乘客」就是咱们频繁操做事件而不断涌入的回调任务
    • 「1 分钟」就是计时器，它是司机决定「关门」的依据，若是有新的「乘客」上车，将清零并从新计时
    • 「关门」就是最后须要执行的函数
  • 应用：input 输入回调事件添加防抖函数后，只会在中止输入后触发一次
  • 实现方案：使用定时器，函数第一次执行时设定一个定时器，以后调用时发现已经设定过定时器就清空以前的定时器，并从新设定一个新的定时器，若是存在没有被清空的定时器，当定时器计时结束后触发函数执行

参考

underscore.js

前端性能优化原理与实践

文章穿梭机

• 【进阶 6-3 期】深刻浅出节流函数 throttle
• 【进阶 6-2 期】深刻高阶函数应用之柯里化
• 【进阶 6-1 期】JavaScript 高阶函数浅析
• 【进阶 5-3 期】深刻探究 Function & Object 鸡蛋问题
• 【进阶 5-2 期】图解原型链及其继承优缺点
• 【进阶 5-1 期】从新认识构造函数、原型和原型链

❤️ 看完三件事

若是你以为这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1. 点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）
2. 关注个人 GitHub，让咱们成为长期关系
3. 关注公众号「高级前端进阶」，每周重点攻克一个前端面试重难点，公众号后台回复「资料」 送你精选前端优质资料。