debounce实现 js_聊聊lodash的debounce实现

本文同步自我的Blog

前段时间团队内部搞了一个代码训练营，大家组织在一起实现 lodash 的 throttle 和 debounce，实现起来觉得并不麻烦，但是最后和官方的一对比，发现功能的实现上还是有差距的，为了寻找我的问题，把官方源码阅读了一遍，本文是我阅读完成后的一篇总结。

本文只会列出比较核心部分的代码和注释，如果对全部的源码有兴趣的欢迎直接看我的repo：

什么是throttle和debounce

throttle(又称节流)和debounce(又称防抖)其实都是函数调用频率的控制器，这里只做简单的介绍，如果想了解更多关于这两个定义的细节可以看下后文给出的一张图片，或者阅读一下lodash的文档。

throttle：将一个函数的调用频率限制在一定阈值内，例如 1s 内一个函数不能被调用两次。

debounce：当调用函数n秒后，才会执行该动作，若在这n秒内又调用该函数则将取消前一次并重新计算执行时间，举个简单的例子，我们要根据用户输入做suggest，每当用户按下键盘的时候都可以取消前一次，并且只关心最后一次输入的时间就行了。

lodash 对这两个函数又增加了一些参数，主要是以下三个：

leading，函数在每个等待时延的开始被调用

trailing，函数在每个等待时延的结束被调用

maxwait(debounce才有的配置)，最大的等待时间，因为如果 debounce 的函数调用时间不满足条件，可能永远都无法触发，因此增加了这个配置，保证大于一段时间后一定能执行一次函数

这里直接剧透一下，其实 throttle 就是设置了 maxwait 的 debounce，所以我这里也只会介绍 debounce 的代码，聪明的读者们可以自己思考一下为什么。

我的实现与lodash的区别

我自己的代码实现放在我的repo里，大家有兴趣的可以看下。之前说过我的实现和 lodash 有些区别，下面就用两张图来展示一下。

这是我的实现

这是lodash的实现

这里看到，我的代码主要有两个问题：

throttle 的最后一次函数会执行两次，而且并非稳定复现。

throttle 里函数执行的顺序不对，虽然我的功能实现了，但是对于每一次 wait 来说，我都是执行的 leading 那一次

lodash 的实现解读

下面，我就会带着这几个问题去看看 lodasah 的代码。</