它比演示更简单。

它们做完全相同的事情(速率限制)，但当throttle被调用时，它会周期性地触发你的函数，而debounce只在最后触发一次。

在整个过程中抑制火焰，只在最后反弹火焰。

例如:如果你正在滚动，throttle将在你滚动时缓慢地调用你的函数(每X毫秒一次)。Debounce将一直等到滚动完成调用函数之后。

--

我喜欢将节流视为“包括debounce”，它们都在事件完成后做出最终决定，但由于实现细节，两者并不总是在同一时间做出最终决定，这可能会使演示令人困惑。

debounging和Throttling是从一系列事件中选择目标以达到减少目标的目的。它们都需要一段时间作为参数，例如:x ms，以及后面/前面的变量来定义如何选择。

消除抖动

当x毫秒后没有其他事件发生时，选择事件

"--->": timeline  "o": event  "|===|": period (x=5)

--oo-o-----ooo-o----o-oo--oo-----o-o-ooo------> events
  |===|    |===|    |===|        |===|
  ||===|   ||===|   | |===|      | |===|   
  |  |===| | |===|  |  |===|     |   |===|
  |      | |   |===||     |===|  |    |===|
  |      | |       ||      |===| |     |===|
---------o---------o-----------o-----------o--> selected events (trailing)
--o--------o--------o------------o------------> selected events (leading)

节流

当有事件发生时，每x毫秒选择一个事件

"--->": timeline  "o": event  "|===|": period (x=5)

--oo-o-----ooo-o----o-oo--oo-----o-o-ooo------> events
  |===|    |===|    |===| |===|  |===||===|
------o--------o--------o-----o------o----o---> selected events (trailing)
--o--------o--------o-----o------o----o-------> selected events (leading)

简单来说:

节流将延迟执行函数。它将减少多次触发事件的通知。 deboundation将一系列对函数的连续调用合并为对该函数的单个调用。它确保为多次触发的事件发出一个通知。

你可以直观地看到其中的区别

如果你有一个函数被调用了很多次——例如当一个调整大小或鼠标移动事件发生时，它可以被调用很多次。如果您不想要这种行为，您可以Throttle它，以便定期调用该函数。deboning将意味着它在一系列事件的结束(或开始)时被调用。

debound允许您管理函数可以接收的调用频率。它将发生在给定函数上的多个调用组合在一起，以便忽略在特定时间持续时间到期之前发生的重复调用。从根本上说，deboundation确保了一个可能发生多次的事件只发送了一个信号。

节流将函数接收的调用频率限制在固定的时间间隔内。它用于确保目标函数的调用频率不会超过指定的延迟。节流是降低重复事件的速率。

这篇文章解释得很好，也有图形。

https://css-tricks.com/debouncing-throttling-explained-examples/

从文章中(并进行了一些澄清):

这(节流)和deboundation之间的主要区别在于节流保证了函数的定期执行，至少每X毫秒执行一次。

通常debounce在指定时间结束时调用函数，而throttle在第一次调用节流函数时调用。有时debounce可以采取额外的配置，将此更改为在开始时执行调用。当使用特定的配置调用时，debounce的一些实现实际上可以做油门所做的事情(参见Lodash源代码)。

这里真正重要的是，用最简单的话说:如果你有一些连续重复一段时间的操作(如鼠标移动，或页面大小调整事件)，你需要运行一些函数来响应，但你不想对每个操作都做出反应(因为这可能会损害性能)，你有两个选择:

debounce - you skip all incoming actions, except the last one (the 'last one' is defined by the 'wait' time period you set for debounce function, for example, 2s - it will consider that actions flood stopped, if no actions were taken for 2s, and then it will react. This strategy is reasonable if you don't care about regular updates, you just need to react at least once. throttle - if you want to react 'on schedule', to make regular updates even if actions flood is endless, you make your function run at regular intervals (no more often, then the specified time interval), for example 2s throttling will mean that your response will be executed an once if action is taken, but no less then 2s after that. So with continuous actions flood your response will be run on 0s, 2s, 4s, 6s, 8s...