共计 2630 个字符,预计需要花费 7 分钟才能阅读完成。
导读 | 实现原理就是利用定时器,函数第一次执行时设定一个定时器,之后调用时发现已经设定过定时器就清空之前的定时器,并重新设定一个新的定时器,如果存在没有被清空的定时器,当定时器计时结束后触发函数执行。 |
手写一个 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 后只会在第一次触发时执行,频繁触发回调结束后不会再执行
正文完
星哥玩云-微信公众号
