这周接到一个需求－给输入框做模糊匹配。这还不简单，监听input事件，取到输入值去调接口不就行了？ 然而后端小哥说不行，这个接口的数据量非常大，这种方式调用接口的频率太高，而且用户输入时调用根本没有必要，只要在用户停止输入的那一刻切调接口就行了。 唉？这个场景听起来怎么这么像防抖呢？

那到底什么是防抖呢？ 大家一定见过那种左右两边中间放广告位的网站，在网页滚动时，广告位要保持在屏幕中间，就要不断地去计算位置，如果不做限制，在视觉上广告位就像在“抖”。防止这种情况，就叫防抖了！

防抖的原理是什么？ 我一直觉得网上流传的例子非常形象：当我们在乘电梯时，如果这时有人过来，我们会出于礼貌一直按着开门按钮等待，等到这人进电梯了，刚准备关门时，发现又有人过来了！我们又要重复之前的操作，如果电梯空间无限大的话，我们就要一直等待了。。。当然人的耐心是有限的！所以我们规定了一个时间，比如10秒，如果10秒都没人来的话，就关电梯门。

用专业术语概括就是：在一定时间间隔内函数被触发多次，但只执行最后一次。

最简易版的代码实现：

function debounce(fn, delay) {let timer = null;return function() {const context = this;const args = arguments;if (timer) {clearTimeout(timer);timer = null;}timer = setTimeout(() => {fn.apply(context, args);}, delay);};
}
复制代码

fn是要进行防抖的函数，delay是设定的延时，debounce返回一个匿名函数，形成闭包，内部维护了一个私有变量timer。我们一直会触发的是这个返回的匿名函数，定时器会返回一个Id值赋给timer，如果在delay时间间隔内，匿名函数再次被触发，定时器都会被清除，然后重新开始计时。

当然简易版肯定不能满足日常的需求，比如可能需要第一次立即执行的，所以要稍做改动：

function debounce(fn, delay, immediate) {let timer = null;return function() {const context = this;const args = arguments;timer && clearTimeout(timer);if(immediate) {const doNow = !timer;timer = setTimeout(() => {timer = null;}, delay);doNow && fn.apply(context, args);}else {timer = setTimeout(() => {fn.apply(context, args);}, delay);}};
}
复制代码

比起简易版，多了个参数immediate来区分是否需要立即执行。其它与简易版几乎一致的逻辑，除了判断立即执行的地方：

const doNow = !timer;timer = setTimeout(() => {timer = null;
}, delay);doNow && fn.apply(context, args);
复制代码

doNow变量的值为!timer，只有!timer为true的情况下，才会执行fn函数。第一次执行时，timer的初始值为null，所以会立即执行fn。接下来非第一次执行的情况下，等待delay时间后才能再次触发执行fn。 注意！与简易版的区别，简易版是一定时间多次内触发，执行最后一次。而立即执行版是不会执行最后一次的，需要再次触发。

防抖的函数可能是有返回值，我们也要做兼容：

function debounce(fn, delay, immediate) {let timer = null;return function() {const context = this;const args = arguments;let result = undefined;timer && clearTimeout(timer);if (immediate) {const doNow = !timer;timer = setTimeout(() => {timer = null;}, delay);if (doNow) {result = fn.apply(context, args);} }else {timer = setTimeout(() => {fn.apply(context, args);}, delay);}return result;};
}
复制代码

但是这个实现方式有个缺点，因为除了第一次立即执行，其它情况都是在定时器中执行的，也就是异步执行，返回值会是undefined。

考虑到异步，我们也可以返回Promise：

function debounce(fn, delay, immediate) {let timer = null;return function() {const context = this;const args = arguments;return new Promise((resolve, reject) => {timer && clearTimeout(timer);if (immediate) {const doNow = !timer;timer = setTimeout(() => {timer = null;}, delay);doNow && resolve(fn.apply(context, args));}else {timer = setTimeout(() => {resolve(fn.apply(context, args));}, delay);}});};
}
复制代码

如此，只要fn被执行，那必定可以拿到返回值！这也是防抖的终极版了！

下次聊聊防抖的兄弟-前端性能优化之节流-throttle。