deboning和throttle之间的主要区别在于，debounce在用户未在特定时间内执行事件时调用函数，而throttle在用户执行事件时以指定时间间隔调用函数。

一个现实生活中的类比帮助我记住:

谈话结束。你等对方说完再回答。 鼓形钻头。你只在简单的4/4鼓位上演奏音符。

debounce的用例:

打字。你想在用户停止输入后做一些事情。所以在最后一次击键后等待1秒是有意义的。每次击键重新启动等待。 动画。当用户停止将鼠标悬停在某个元素上时，需要将其收缩。不使用debounce可能会导致不稳定的动画，因为光标会无意中在“热”和“冷”区域之间移动。

节流的用例:

滚动。你想要对滚动做出反应，但限制所做的计算量，所以每100毫秒做一些事情就足以防止潜在的延迟。 鼠标移动。与滚动相同，但用于鼠标移动。 API调用你想在某些UI事件上触发API调用，但想限制API调用的数量，以免使服务器过载。

一幅图胜过千言万语

节气门

防反跳

注意Debounce直到事件流停止才会触发。但是，Throttle会在每个间隔时间内触发一个事件。

(感谢css-tricks)

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

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

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

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

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

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

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

节流强制在一段时间内可以调用函数的最大次数。就像“最多每100毫秒执行一次这个函数。”

deboundation强制函数不被再次调用，直到一段时间过去而没有被调用。就像“仅在100毫秒后未被调用时才执行该函数。”

ref