简单来说：

• 节流将延迟执行功能。它将减少多次触发的事件的通知。
• 去抖动会将一系列对函数的顺序调用合并为对该函数的单个调用。它确保为多次触发的事件发出一个通知。

您可以在这里直观地看到差异

如果您有一个被多次调用的函数 - 例如，当发生调整大小或鼠标移动事件时，它可以被多次调用。如果你不希望这种行为，你可以油门它，这样的函数被调用定期。去抖动意味着它在一系列事件的结束（或开始）被调用。

我个人发现反跳更难理解比节流。

由于这两个功能都可以帮助您推迟和降低某些执行的速度。假设您正在重复调用由油门/去抖动返回的装饰函数......

• Throttle : 原函数每指定周期最多调用一次。
• 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 秒发送一条新消息，而您的 IM 应用程序图标则上下跳动，您可以采取...

• 天真的方法：检查每条消息，只要它到达。当您的应用程序图标弹跳时，请检查。这不是最有效的方式，但您始终是最新的。
• 节流方法：每 5 分钟检查一次（当有新的时）。当新消息到达时，如果您在过去 5 分钟内随时检查过，请忽略它。您可以使用这种方法节省时间，同时仍在循环中。
• Debounce方法：您知道 Chatty，她将整个故事分解成多个部分，然后在一条又一条消息中发送它们。您等到 Chatty 完成整个故事：如果她停止发送消息 5 分钟，您会认为她已经完成，现在您检查所有内容。

差异

+--------------+-------------------+-------------------+
|              |  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 秒。

• 射击游戏 -手枪在每次射击之间需要 1 秒的时间，但用户多次点击鼠标。throttle在鼠标点击时使用。

角色互换：

• 在搜索栏上限制 1 秒- 如果用户abcdefghij输入0.6 sec. 然后油门将在第一次a按下时触发。它将在接下来的 1 秒内忽略每次按下，即b在 0.6 秒时将被忽略。然后c在 1.2 秒将再次触发，再次重置时间。所以d将被忽略并被e触发。

• 手枪弹跳1秒-当用户看到敌人时，他点击鼠标，但不会射击。他会在那秒内再次点击几次，但不会射击。他会看看它是否还有子弹，那个时候（最后一次点击后 1 秒）手枪会自动开火。

（2021 年修订）

对现实生活场景的解释：（对不起，如果有道理）

酒吧外面有一些警卫。守卫允许说“我会去”的人进入酒吧。这是一个正常的场景。任何说“我去”的人都可以进入酒吧。

现在有一个Throttle Guard（油门 5 秒）。他喜欢第一个回应的人。谁先说“我去”，他就允许那个人。然后他拒绝每个人5 秒。之后，再次任何先说的人将被允许，其他人将被拒绝5 秒。

还有另一个Debounce Guard ( debounce 5 sec )。他喜欢能给他带来5秒精神休息的人。因此，如果有人说“我去”，守卫会等待5 秒钟。如果 5 秒内没有其他人打扰他，他允许第一个人。如果其他人在这5 秒内说“我会去” ，他会拒绝第一个。他又开始了5秒等待第二个人，看第二个人能否给他带来精神上的休息。

油门（1秒）：你好，我是机器人。只要你继续 ping 我，我就会一直和你说话，但每 1 秒后。如果你在一秒过去之前 ping 我的回复，我仍然会以 1 秒的间隔回复你。换句话说，我只是喜欢按确切的时间间隔回复。

Debounce（1 秒）：嗨，我是那个 ^^ 机器人的堂兄。只要你一直ping我，我就会保持沉默，因为我喜欢在你上次ping我1秒后才回复。我不知道，是因为我的态度有问题，还是因为我只是不喜欢打断别人。换句话说，如果您在上次调用后的 1 秒内一直要求我回复，您将永远不会得到回复。是啊是啊……加油！骂我粗鲁。

油门（10 分钟）：我是一台伐木机。在 10 分钟的固定间隔后，我将系统日志发送到我们的后端服务器。

Debounce（10 秒）：嗨，我不是那台伐木机的堂兄。（在这个虚构的世界中，并非每个去抖动器都与节流器有关）。我在附近的一家餐馆做服务员。我应该让你知道，只要你一直在你的订单中添加东西，我就不会去厨房执行你的订单。只有在您上次修改订单后10 秒过去了，我才会认为您已完成订单。只有这样我才会去厨房执行您的订单。

酷演示：https : //css-tricks.com/debouncing-throttling-explained-examples/

服务员类比的积分：https : //codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

节流会强制限制一个函数随时间被调用的最大次数。如“最多每 100 毫秒执行一次此函数”。

去抖动强制一个函数在一段时间内未被调用之前不会被再次调用。如“仅当 100 毫秒过去了而没有被调用时才执行此函数”。

参考