目录

 

前言

概念

函数防抖（debounce）

函数节流（throttle）

常见应用场景

函数防抖的应用场景

函数节流的应用场景

实现原理

函数防抖（debounce）

函数节流（throttle）

异同比较

lodash中的 Debounce 、Throttle

如何使用 debounce

使用示例

实现

总结

---

前言

最近和前端的小伙伴们，在讨论面试题的时候。谈到了函数防抖和函数节流的应用场景和原理。于是，想深入研究一下两者的异同。对于后端而言，函数防抖、函数节流的使用场景并不是很多。但是，对于前端使用却是很常见。常见实用场景，有滚动加载、搜索框输入、窗口大小拖拽 Resize。

概念

函数防抖（debounce）

函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

简单的说，当一个动作连续触发，则只执行最后一次。

打个比方，坐公交，司机需要等最后一个人进入才能关门。每次进入一个人，司机就会多等待几秒再关门。

函数节流（throttle）

限制一个函数在一定时间内只能执行一次。

举个例子，乘坐地铁，过闸机时，每个人进入后3秒后门关闭，等待下一个人进入。

为了方便理解，我们首先通过一个可视化的工具，感受一下三种环境（正常情况、函数防抖情况 debounce、函数节流 throttle）下，对于mousemove事件回调的执行情况。

三种环境下，mousemove事件执行分布图

 

竖线的疏密代表事件执行的频繁程度。可以看到，正常情况下，竖线非常密集，函数执行的很频繁。而debounce（函数防抖）则很稀疏，只有当鼠标停止移动时才会执行一次。throttle（函数节流）分布的较为均已，每过一段时间就会执行一次。

常见应用场景

函数防抖的应用场景

连续的事件，只需触发一次回调的场景有：

搜索框搜索输入。只需用户最后一次输入完，再发送请求手机号、邮箱验证输入检测窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

函数节流的应用场景

间隔一段时间执行一次回调的场景有：

滚动加载，加载更多或滚到底部监听谷歌搜索框，搜索联想功能高频点击提交，表单重复提交

实现原理

函数防抖（debounce）

函数防抖的简单实现：

 

const _.debounce = (func, wait) => { let timer; return () => { clearTimeout(timer); timer = setTimeout(func, wait); }; };

函数防抖在执行目标方法时，会等待一段时间。当又执行相同方法时，若前一个定时任务未执行完，则 clear 掉定时任务，重新定时。

函数节流（throttle）

1）函数节流的 setTimeout 版简单实现

 

const _.throttle = (func, wait) => { let timer; return () => { if (timer) { return; } timer = setTimeout(() => { func(); timer = null; }, wait); }; };

函数节流的目的，是为了限制函数一段时间内只能执行一次。因此，通过使用定时任务，延时方法执行。在延时的时间内，方法若被触发，则直接退出方法。从而，实现函数一段时间内只执行一次。

2）函数节流的时间戳版简单实现 根据函数节流的原理，我们也可以不依赖 setTimeout实现函数节流。

 

const throttle = (func, wait) => { let last = 0; return () => { const current_time = +new Date(); if (current_time - last > wait) { func.apply(this, arguments); last = +new Date(); } }; };

其实现原理，通过比对上一次执行时间与本次执行时间的时间差与间隔时间的大小关系，来判断是否执行函数。若时间差大于间隔时间，则立刻执行一次函数。并更新上一次执行时间。

异同比较

相同点：

都可以通过使用 setTimeout 实现。目的都是，降低回调执行频率。节省计算资源。

不同点：

函数防抖，在一段连续操作结束后，处理回调，利用 clearTimeout 和 setTimeout 实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。函数防抖关注一定时间连续触发，只在最后执行一次，而函数节流侧重于一段时间内只执行一次。

lodash中的 Debounce 、Throttle

最后讨论一下 lodash中 debounce的使用和源码浅析。之所以分析 debounce，是因为在lodash中，throttle 是基于 debounce 实现的。如果能理解了 debounce的实现，也就能快速掌握 throttle。

如何使用 debounce

首先，看一下 debounce 的API。需要注意的是，API中的第三个参数 options。一共有3个属性，分别是 leading、maxWait、trailing。含义分别是在开始之前调用、最大等待时间、在延迟后调用。

leading与 trailing的区别，一个是在等待前被调用，一个是等待后被调用。我们上文中，提到的 debounce 的简单实现，都是等待后被调用。lodash 中默认（trailing: true）的也为等待后被调用。

 

/** * 创建一个会在 `wait` 毫秒后调用 `func` 的防抖动函数。 * 最后一次传入 `func` 参数会传给防抖动函数，随后调用的防抖动函数返回是最后一次 func 调用的结果。 * 防抖动函数提供 cancel 方法来取消延迟的函数调用 以及 flush 方法来立即执行函数调用。 * * 注意: 如果 leading 和 trailing 都设定为 true，则 func 允许 trailing 方式调用的条件为: 在 wait 期间多次调用。 * * @param {Function} func 要防抖动的函数 * @param {number} [wait=0] 需要延迟的毫秒数 * @param {Object} [options={}] 选项对象 * @param {boolean} [options.leading=false] 指定调用在延迟开始前 * @param {number} [options.maxWait] 设置 `func` 允许被延迟的最大值 * @param {boolean} [options.trailing=true] 指定调用在延迟结束后 * @returns {Function} 返回一个具有防抖动功能的函数 */ _.debounce(func, [wait=0], [options])

使用示例

 

// 正确的用法 $(window).on('scroll', _.debounce(doSomething, 200)); // 错误的用法 // 会导致多次调用debounce $(window).on('scroll', function() { _.debounce(doSomething, 300); }); // 点击后立即执行 sendMail $('.btn').on('click', _.debounce(sendMail, 300, { 'leading': true, 'trailing': false })); // `batchLog` 调用1次之后，1秒内会被触发。 const debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });

实现

推荐先粗略阅读 lodash源码，若难度较大，可以参考这篇博文——聊聊lodash的debounce实现，以及作者的 debounce 简单实现。 54行实现 debounce 和 throttle，虽然功能不如 lodash 强大，但是非常适合理解 debounce的实现。

在理解 debounce 实现原理上（若不理解，可以返回阅读上文中——函数防抖的简单实现），主要从三个功能点理解：

leading 功能的实现maxWait 功能的实现trailing 控制

总结

最后，总结一下函数防抖与函数节流的区别。函数防抖，将多次执行的事件合并成一次。函数节流，保持一段时间执行一次。推荐阅读「涂鸦码龙」翻译的这篇 - 实例解析防抖动（Debouncing）和节流阀（Throttling），加深理解。文章丰富的实例，可深刻感受一下两者的区别。

在不是很理解 debounce的API的情况下，直接阅读lodash源码，花了2个晚上看得懂云里雾里。后面，重新阅读API文档，弄明白了 leading 和 trailing的目的。很快就看懂了 debounce的源码。因此，建议阅读源码前，先理解API中各个参数的用处。带着目的看源码会容易一些。

本面试题为前端常考面试题，后续有机会继续完善。我是歌谣，一个沉迷于故事的讲述者。

欢迎一起私信交流。

“睡服“面试官系列之各系列目录汇总（建议学习收藏）