这周接到一个需求－给输入框做模糊匹配。这还不简单，监听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被执行，那必定可以拿到返回值！这也是防抖的终极版了！
下次聊聊防抖的兄弟-。