这不仅是另一篇文章，试图解释如何在代码级别上工作，而是要记住和可视化概念的例证，以便您可以在工作中实际应用它们。

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

在下面的编码器中，我将延迟设置为2秒钟，以进行调试和油门。尝试单击随机食品并暂停。

指数

餐厅类比
解释
• 为什么无论如何都要签出或油门？
  JS Event Handler
  怎么了 ？
  • 风门
  [2
链接到页面

Ashiqsultan.github.io

github链接
餐厅类比

？阅读食品=？按钮单击

？‍？服务员去厨房=？ API调用

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

每次提及一个项目
• [2
喜欢JS立即处理每个事件

？拒绝的服务员

1. 开始阅读菜单时，他将等待您在接下订单之前至少暂停2秒。

   喜欢等待用户在进行API调用之前完成键入
   ？‍？节流服务员
每2秒钟仅接受一次订单

2. 如果您在这2秒内提及多个项目，则它们都将以相同的顺序进行。 喜欢将API限制为每x秒一次，无论用户活动如何

   • 注意：主要区别是：
3. 节流：定期触发，无论何时停止活动
   解释
   为什么无论如何都要审问或油门？
   在理解审问或油门之前，我们需要知道为什么它们甚至首先使用它们。要知道让我们了解JS事件处理程序的行为
   JS的活动处理程序
在JS中，事件处理程序只是当特定事件（如单击，打字或滚动）发生时执行的函数。

默认情况下，这些处理程序每​​次发生事件发生

- 每次击键，每次点击或滚动运动。

//基本事件处理程序 button.AddeventListener（'click'，function（）{ console.log（'按钮单击！'）; }）; //基本的击键处理程序 input.addeventlistener（'keyup'，function（）{ console.log（'键按！'）; }）;
怎么了？
例如，您有一个按钮，该按钮可以进行API调用

函数makeapicall（）{ console.log（“ API呼叫制作”）; } button.addeventlistener（'click'，（）=> { makeapicall（）; }）;

上面的函数将在每个按钮上执行makeapicall（）单击（i.e）

如果在1秒内设法按10次，请猜测您在1秒内完成了10个API调用。

这是默认行为。

但是，每次为事件发射API调用可能是降低的，大多数时候这不是您想要的。这是节流和辩论的地方。

如果您想从本文中删除一个定义，则可能是其中一个。

节流和辩论是控制事件侦听率的两种最常见方法。

辩论

我不会解释辩论的代码，因为这可以从lodash导入，而是我们会看到您可以实际使用它的位置。 仅在用户停止输入一定时间或停止单击一定的时间时，请使用拒绝。
在我们的示例中，如果用户连续5分钟连续单击按钮，则API调用只能进行一次。

，因此在这里发生了两件事：

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

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

用户需要停止单击。

风门

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

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

示例如果用户连续打字1分钟而无需暂停，则每2秒钟都会调用API。

结论 如文中提到的那样，不是要解释函数如何工作而不是可视化和理解其使用的原因。我肯定建议您在代码级别上了解它们的工作方式，但个人仍然会使用lodash库提供的调试和油门，而不要重新发明轮子。

如果您喜欢这篇文章，则会激励我写更多。谢谢 ？。