函数防抖指的是：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。例如，如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。
使用场景
防抖适合多次事件一次响应的情况。
比较典型的有搜索事件，用户在不断输入值时，用防抖来节约请求资源，只有最后一次回车才能返回结果。还有按钮点击事件，为了防止用户多次重复提交也会使用防抖函数。最后就是部分的电话号码输入的验证，要等停止输入后才会进行一次验证。
实现及原理
就是利用定时器，函数第一次执行时设定一个定时器，之后调用时发现已经设定过定时器就清空之前的定时器，并重新设定一个新的定时器，如果存在没有被清空的定时器，当定时器计时结束后触发函数执行。
方式1
// 实现 1
// fn 是需要防抖处理的函数
// wait 是时间间隔
function debounce(fn, wait) {
// 通过闭包缓存一个定时器 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)。
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 后只会在第一次触发时执行，频繁触发回调结束后不会再执行
小结
函数节流和防抖都是「闭包」、「高阶函数」的应用。
函数防抖 debounce 指的是某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次
防抖可以理解为：如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。
-
「人进电梯」就是我们频繁操作事件而不断涌入的回调任务
-
「10秒钟」就是计时器，它是电梯决定「出发」的依据，如果有新的「人」进电梯，将清零并重新计时
-
「出发」就是最后需要执行的函数
