区分JavaScript中的防抖节流函数定义

👨 作者简介：大家好，我是Taro，前端领域创作者
✒️ 个人主页：唐璜Taro
🚀 支持我：点赞👍+📝 评论 + ⭐️收藏

---

---

前言

防抖和节流是日常开发中使用频率非常高的函数，所以也会频繁的出现在面试题当中。

如果直接面对这两个功能，确实有点很容易混淆，根本无法区分开防抖和节流有什么区别，此篇文章特地来总结一下对防抖和节流的认知过程

我们不仅仅要区分清楚防抖和节流两者的区别，也要明白在实际中哪些场景会用到

---

一、检测一下你在哪个阶段

• 对防抖、节流完全区分不开
• 可以区分，但是不知道如何应用
• 会通过一些第三方库来使用，但是不知道怎么实现的

二、认识防抖和节流

1.防抖示例

借用网上的2副图片来说明详细触发过程：

假设等待时间为：1s ；蓝色的柱子代表了触发的频率，黄色的柱子代表了函数真正执行的次数

我们可以很清楚的看到，只有黄色的柱子代表的频繁触发的事件停止，等到1s以后，才会触发真正的函数。如果你在999ms再次触发了事件，真正执行的函数也会相应的推迟到到1s后触发。

2.节流示例

无论1s事件如何频繁的触发，真正的函数只会在第1ms执行一次，剩余999ms，无论你怎么触发都不会在执行

---

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了防抖和节流函数的概念定义，而防抖和节流函数在日常开发中有些非常广阔的应用场景。