良许Linux教程网 干货合集 讲解一下防抖函数Debounce

讲解一下防抖函数Debounce

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

讲解一下防抖函数Debounce

手写一个 debounce

防抖函数 debounce 指的是某个函数在某段时间内,无论触发了多少次回调,都只执行最后一次。

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

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

不过 underscore 中的 debounce 还有第三个参数:immediate 。这个参数是做什么用的呢?

传参 immediate 为 true, debounce会在 wait 时间间隔的开始调用这个函数 。(注:并且在 wait 的时间之内,不会再次调用。)在类似不小心点了提交按钮两下而提交了两次的情况下很有用。

把 true 传递给 immediate 参数,会让 debounce 在 wait 时间开始计算之前就触发函数(也就是没有任何延时就触发函数),而不是过了 wait 时间才触发函数,而且在 wait 时间内也不会触发(相当于把 fn 的执行锁住)。如果不小心点了两次提交按钮,第二次提交就会不会执行。

那我们根据 immediate 的值来决定如何执行 fn 。如果是 immediate 的情况下,我们立即执行 fn ,并在 wait 时间内锁住 fn 的执行, wait 时间之后再触发,才会重新执行 fn ,以此类推。

// immediate 表示第一次是否立即执行
function debounce(fn, wait = 50, immediate) {
   let timer = null
   return function(...args) {
       // this保存给context
       const context = this
       if (timer) clearTimeout(timer)
     
      // immediate 为 true 表示第一次触发后执行
      // timer 为空表示首次触发
       if (immediate && !timer) {
           fn.apply(context, args)
       }
       
       timer = setTimeout(() => {
           fn.apply(context, args)
       }, wait)
   }
}

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

underscore 源码解析

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

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

 // 定时器计时结束后
 // 1、清空计时器,使之不影响下次连续事件的触发
 // 2、触发执行 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 多了以下几点功能。

1、函数 func 的执行结束后返回结果值 result

2、定时器计时结束后清除 timeout ,使之不影响下次连续事件的触发

3、新增了手动取消功能 cancel

4、immediate 为 true 后只会在第一次触发时执行,频繁触发回调结束后不会再执行

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

137e00002230ad9f26e78-265x300
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部