防抖动与限流：二者有何区别？

网站性能对提升用户体验至关重要。本文将介绍防抖和限流等性能优化技术，以及它们之间的主要区别。

防抖和节流是两种广泛使用的技术，可以帮助我们限制函数的触发频率。这两种技术在事件和与其关联的函数执行之间增加了一层控制。API 服务器通常会实现这两种技术中的一种，以防止应用程序过载。

这些函数调用可以是简单的滚动事件，也可以是向服务器发起的 API 调用。这两种技术几乎相同，都能帮助我们减少函数调用的次数，但它们之间存在一个虽小但重要的区别。

在深入探讨它们的区别之前，让我们先了解一下它们各自的工作原理——

什么是防抖动？

防抖技术是指无论用户触发事件多少次，只有在用户停止触发事件后
经过一段特定的时间后才会进行调用。

例如，假设用户正在搜索框中输入内容。该搜索框会调用 API，并且附加了一个防抖函数，设定持续时间为 400 毫秒。因此，只有在用户停止输入后 400 毫秒过去之后，才会发出 API 调用。

GIF

几个月前，我写了一篇关于 JavaScript 防抖的详细文章。如果你对防抖的概念完全陌生，我强烈建议你点击这个链接阅读那篇文章，然后再继续阅读本文。

什么是限流？

节流是一种技术，它严格控制下一次函数调用的执行时间。无论用户触发事件多少次，在给定的时间段内，所关联的函数都只会执行一次。

让我们通过自己编写一个简单的油门函数来理解这一点——

我们先来看一个简单的按钮。假设这个按钮会调用某个 API。onclick这个按钮的属性会调用两个函数normalFunc()——apiWithThrottle()

在我们的 Javascript 文件中，我们将定义以下函数：

该函数会normalFunc()记录按钮的点击次数和apiCallFunc()API 调用次数。apiWithThrottle()当按钮触发该函数时，它会调用一个函数，throttle()该函数会将要限制的函数和时间限制作为参数传递给该函数。

运行这段代码后，我们会看到类似这样的结果——

GIF

这里，我们将时间限制设置为 1 秒（1000 毫秒）。请注意，用户多次点击按钮，但 API 调用仅进行了 3 次，每次间隔 1 秒。简而言之，即使用户在 3 秒内点击按钮 15 次，API 调用次数也仅为 3 次。

如果您想亲自尝试一下，这里是CodePen的链接。

防抖动与节流

我们可以通过一个简单的现实生活例子来理解这两者之间的区别——

• 防抖动

想象一下，你是一个七岁的小孩，特别爱吃巧克力。你不停地缠着妈妈要巧克力。她给了你一些，但你又开始要。你问了她无数遍，她终于不耐烦了，告诉你，除非你接下来一个小时不打扰她，保持安静，否则就不能再给你巧克力。也就是说，如果你一直问，就得等一个小时才能再要到巧克力。

这是防抖。

• 节流

再举个例子——你明明几分钟前才拿到巧克力，却又缠着妈妈要。你不停地要，她终于不耐烦了，决定给你一些。但她毕竟是你妈，知道你过一会儿肯定还会要。所以她给了你巧克力，但条件是接下来一个小时内不许再给你。你还是不停地缠着她要，但她这次不理你了。一个小时后，她终于把巧克力给了你。以后不管你再要多少，都得等一个小时才能拿到。

这就是限速！

用例

这两种技术都有各自的应用场景。

当最近一次事件发生的结果至关重要时，可以使用防抖功能。例如，电子商务网站上的搜索查询。

当传递给函数调用的输入无关紧要或每次都相同时，可以使用节流。例如，网页上的无限滚动。在这种情况下，我们需要检查用户距离页面底部有多远。如果用户距离底部太近，我们会请求更多数据并将其添加到页面中。这里防抖机制不起作用，因为它只会在用户停止滚动时触发事件，而我们需要在用户到达底部之前就开始获取内容。

另一个例子是多人格斗游戏，玩家角色需要通过出拳来击败对手。可以对角色的出拳能力进行限制，使其每秒只能出拳一次。这样，即使玩家下达5秒内出拳10次的指令，角色也只会出拳5次。

总结

防抖和节流等技术让我们能够控制网站事件的执行，从而减少可能影响网站性能的高计算任务数量。它们可能适用于不同的应用场景，但最终目标都是一样的：提升网站性能。所以，如果您是一位希望优化网站的开发者，现在您知道该怎么做了！

如果你喜欢这篇文章，请分享给朋友，并在Twitter上关注我 - @afraz_momin。我计划在接下来的几天里撰写更多关于JavaScript的文章！