假设我们有一个回调函数“cb”，要在事件“E”时调用。 让“E”在1秒内被触发1000次，因此会有1000次对“cb”的调用。也就是1个电话/毫秒。为了优化，我们可以使用:

节流:节流(100ms)，“cb”将 在第100毫秒，第200毫秒，第300毫秒，…1000 ms)。也就是1次呼叫/100毫秒。这里对“cb”的1000次调用优化为10次调用。 debounning:当debounning为(100ms)时，“cb”只会在[1100秒]被调用一次。这是发生在第1000毫秒的最后一次触发“E”后的100毫秒。这里对“cb”的1000次调用优化为1次调用。

据我所知，简单来说 节流-类似于调用setInterval(回调)的特定次数，即在事件发生的时间内调用同一函数的特定次数 和. . deboundation -类似于调用setTImeout(callbackForApi)或在事件发生后经过一定时间后调用函数。 这个链接很有用 https://css-tricks.com/the-difference-between-throttling-and-debouncing/

简单来说:

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

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

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

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

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

debounce的用例:

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

节流的用例:

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

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)

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

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