永远不要忘记再次反跳和油门。可视化它们 - 包括 Codepen

这不仅仅是另一篇试图解释去抖动或限制如何在代码级别工作的文章，而是一个记住和可视化概念的插图，以便您可以在工作中实际应用它们。

就我个人而言，我经常发现自己忘记了去抖动和节流的概念，所以当有人要求我解释它们时 - 或者如果在采访中出现问题 - 我只是眨眼？为了避免这种情况，我制作了一个简单的页面来帮助刷新我的记忆。如果您不想感觉自己像个冒名顶替者，请跟随？.

在下面的代码中，我将去抖和油门的延迟设置为 2 秒。尝试点击随机食物并暂停。

指数

• 餐厅类比
• 解释
  • 为什么要反跳或节流？
  • JS 事件处理程序
  • 怎么了？
  • 反跳
  • 油门

页面链接

ashiqsultan.github.io

GitHub 链接

餐厅类比

想象一下您在一家餐厅想要点一些食物，因此您从桌子上选择菜单，然后开始阅读所有项目。 （在我分享的网页中，点击不同的食物就相当于阅读菜单项）

这里的类比

• ？阅读食物项 = ?点击按钮
• ？‍？服务员去厨房=？ API调用

想象一下餐厅里有三种不同类型的服务员可以为您服务：

1. ?‍♂️ 普通服务员

   • 每次提及某项时都记下
   • 跑到厨房拿每件物品
   • 就像 JS 立即处理每个事件

2. ？反跳服务员

   • 当你开始阅读菜单时，他会等你至少停顿2秒才点菜。
   • 就像在进行 API 调用之前等待用户完成输入

3. ?‍?被扼杀的服务员

   • 每2秒只接受一次订单
   • 如果您在 2 秒内提及多个项目，它们都会按相同的顺序排列
   • 例如将 API 调用限制为每 X 秒一次，无论用户活动如何

注意：主要区别是：

• 去抖动：等待活动（按钮单击）停止指定​​时间来触发
• 限制：定期触发，无论活动何时停止
• 另外 2 秒只是我用作示例的时间，它可以是任何时间段

解释

为什么要进行反跳或节流？

在了解去抖或节流之前，我们首先需要知道为什么要使用它们。要知道这一点，让我们了解 JS 事件处理程序的行为

JS 中的事件处理程序

在 JS 中，事件处理程序只是在发生特定事件（如单击、键入或滚动）时执行的函数。 默认情况下，这些处理程序将在每次事件发生时触发 - 每次击键、每次单击或滚动移动。

// Basic event handler
button.addEventListener('click', function() {
    console.log('Button clicked!');
});

// Basic keystroke handler
input.addEventListener('keyup', function() {
    console.log('Key pressed!');
});

怎么了？

例如，您有一个可以进行 API 调用的按钮

function makeApiCall() {
  console.log("API call made");
}

button.addEventListener('click', () => {
  makeApiCall();
});

上面的函数将在每次点击按钮时执行 makeApiCall() (即) 如果你在 1 秒内按了 10 次，猜猜你在 1 秒内进行了 10 次 api 调用。是默认行为。

但是每次为事件触发 API 调用可能效率很低，而且大多数时候这不是您想要的。这就是节流和去抖动发挥作用的地方。

如果你想从本文中删除一个定义，可能就是这个。 节流和去抖是控制事件监听器响应率的两种最常见的方法。

去抖

我不会解释去抖动的代码，因为它只能从 lodash 导入，而是我们将看看你可以在哪里实际使用它。

当您希望仅在用户停止输入一段时间或停止点击一段时间后才进行 api 调用时，请使用 Debouncing。

在我们的示例中，如果用户连续单击按钮甚至连续 5 分钟，则 api 调用将仅进行一次。

这里发生了两件事：

• 用户需要停止点击。
• 停止点击意味着至少2秒内不应点击按钮。

风门

油门就像一个间隔。当您不想等到用户停止而是在每个间隔（例如 2 秒）进行 api 调用时，请使用此方法

例如，如果用户连续输入 1 分钟而没有暂停，那么您将每 2 秒调用一次 API。

结论

正如文章中提到的，这并不是为了解释这些函数是如何工作的，而是为了可视化并理解其使用原因。我肯定会建议您在代码级别了解它们是如何工作的，但个人仍然会使用 lodash 库提供的去抖和节流，而不是重新发明轮子。

如果你喜欢这篇文章请点赞，这真的会激励我写更多。谢谢 ？。

以上是永远不要忘记再次反跳和油门。可视化它们 - 包括 Codepen的详细内容。更多信息请关注PHP中文网其他相关文章！