浅析函数防抖与函数节流

Posted 2023-03-09

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

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

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

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

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

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

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

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

函数防抖的简单实现：

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

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

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

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

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

相同点：

不同点：

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

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

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

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

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

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

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