节流

节流强制一个函数可以被调用的最大次数 加班。就像“每100次执行一次这个函数 毫秒。”假设在正常情况下你会这样做 在10秒内运行1000次。如果你把它控制在一次 每100毫秒，它最多只执行该函数100次 次

(10s * 1,000) = 10,000ms
10,000ms / 100ms throttling = 100 maximum calls

消除抖动

撤销强制函数不再被调用，直到 一段时间过去了，它还没有被调用。就像在 “只有在100毫秒之后才执行这个函数 被称为”。

也许一个函数在短时间内被调用1000次，分散在3秒内，然后停止被调用。如果您在100毫秒时将其解除，则该函数只会在爆发结束后的3.1秒内触发一次。每次在爆发期间调用该函数时，它都会重置反弹计时器

来源:-油门和反弹

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

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...

Throtle只是debounce的包装器，它使debounce在一段时间内调用传递的函数，如果debounce在一段时间内延迟函数调用，该时间大于Throtle中指定的时间。

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

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

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

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

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

差异

+--------------+-------------------+-------------------+
|              |  Throttle 1 sec   |  Debounce 1 sec   |
+--------------+-------------------+-------------------+
| Delay        | no delay          | 1 sec delay       |
|              |                   |                   |
| Emits new if | last was emitted  | there is no input |
|              | before 1 sec      |  in last 1 sec    |
+--------------+-------------------+-------------------+

用例解释:

搜索栏-不想搜索每次用户按下键?当用户停止输入1秒时想要搜索。使用debounce 1 SEC按下键。 射击游戏-手枪每次射击之间需要1秒的时间，但用户点击鼠标多次。在鼠标点击时使用油门。

角色互换:

Throttling 1 sec on search bar- If users types abcdefghij with every character in 0.6 sec. Then throttle will trigger at first a press. It will will ignore every press for next 1 sec i.e. bat .6 sec will be ignored. Then c at 1.2 sec will again trigger, which resets the time again. So d will be ignored and e will get triggered. Debouncing pistol for 1 sec- When user sees an enemy, he clicks mouse, but it will not shoot. He will click again several times in that sec but it will not shoot. He will see if it still has bullets, at that time (1 sec after last click) pistol will fire automatically.

进一步解释投入产出与现实生活的比较

酒吧外面有几个警卫。警卫允许说“我去”的人进入酒吧。这是正常的情况。任何说“我去”的人都可以进入酒吧。

现在有一个Throttle Guard(节流5秒)。他喜欢最先回应的人。谁先说“我要去”，他就让那个人去。然后他会在5秒内拒绝每个人。在这之后，无论谁先说，他都会被允许，其他人会被拒绝5秒。

还有另一个弹跳守卫(弹跳5秒)。他喜欢能让他精神休息5秒钟的人。所以如果有人说“我去”，警卫会等5秒钟。如果5秒钟内没有其他人打扰他，他会允许第一个人打扰他。如果有人在这5秒内说“我要去”，他会拒绝第一个。他又开始了等待第二个人的5秒，看第二个人是否能让他得到精神上的休息。

它比演示更简单。

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

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

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

--

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