lodash库建议以下文章https://css-tricks.com/debouncing-throttling-explained-examples/详细解释Debounce和Throttle之间的区别及其起源

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

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

debounce的用例:

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

节流的用例:

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

我个人认为反弹比油门更难理解。

因为这两个函数都可以帮助您延迟和降低某些执行的速度。假设您正在调用由throttle/debounce反复返回的装饰函数…

节流:在指定的时间段内，原函数最多被调用一次。 Debounce:在指定的时间后，调用方停止调用被修饰的函数后，将调用原始函数。

我发现debounce的最后一部分对于理解它试图实现的目标至关重要。我还发现_.debounce的旧版本实现有助于理解(由https://davidwalsh.name/function-debounce提供)。

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
_.debounce = function(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

这是一个牵强的比喻，但也许也有帮助。

你有一个叫Chatty的朋友，他喜欢通过IM和你聊天。假设当她说话时，她每5秒发送一条新消息，而你的即时通讯应用程序图标上下跳动，你可以…

Naive approach: check every message as long as it arrives. When your app icon bounces, check. It's not the most effective way, but you are always up-to-date. Throttle approach: you check once every 5 minutes (when there are new ones). When new message arrives, if you have checked anytime in the last 5 minutes, ignore it. You save your time with this approach, while still in the loop. Debounce approach: you know Chatty, she breaks down a whole story into pieces, sends them in one message after another. You wait until Chatty finishes the whole story: if she stops sending messages for 5 minutes, you would assume she has finished, now you check all.

一幅图胜过千言万语

节气门

防反跳

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

(感谢css-tricks)

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)

这实际上是限制一个事件的方法。例如，如果你正在监听onclick事件，如果它是常规的，它将监听你所做的每一次点击。

如果你使用Throttle，它会在你想要监听事件的时间之间设置一个间隔，例如每秒钟监听一次点击。

Debounce的限制更大，它只会在事件开始或结束时触发自己。例如，你正在滚动，你使用Debounce，它只会在你开始和结束滚动时触发。