在写小程序时候，因为没有引入 NPM 包，所以有些通用功能需要自己写。

防抖和节流就是其中之一。

而在面试中，这两个函数经常要求手写出来。

所以不单要熟悉使用，还得明白它的原理。

防抖和节流都能用于限制函数的执行频率，但是它们的限制方式存在区别。

在看代码前，可以先看一道相关的题目。

这道题目可能对阅读下面代码有一定帮助。

防抖（debounce）

防抖函数是设定一个计时器：

• 当计时器停止后，回调函数会被执行
• 如果函数被持续调用，则重新开始计时

以点赞功能为例，如果用户每按点赞就发送一次请求，这是不合理的，会给后台带来不必要的压力。

所以，我们会考虑引入防抖函数。

即使用户在 2 秒内点击了 10 次，最后还是只发送 1 次请求。

那么，反映在代码上，就是 ——

节流（throttle）

节流函数是设定一个计时器：

• 当计时器停止后，回调函数会被执行
• 如果函数被持续调用，并不会重新开始计时，也不会开启一个新的计时周期

以点赞功能为例：如果用户以 0.1s 的频率持续不断点赞，一个设置为 2s 的节流函数，会每隔 2s 发一次点赞请求。

而如果是一个设置为 2s 的防抖函数，则只会在用户停止点赞后 2s 才会发出点赞请求。

而反应到代码上，就是

其他

演示的防抖和节流代码，只是一个简化版本。例子中都是时间结束后，才产生回调，属于后置的防抖和节流。

存在需要在函数调用时，先执行一次回调函数的情况，这个留待大家思考。