谁能给我一个简单的解释,关于节流和debounging函数之间的区别,以限制速率的目的。

在我看来,两者的作用是一样的。我查看了这两个博客来找出答案:

http://remysharp.com/2010/07/21/throttling-function-calls

http://benalman.com/projects/jquery-throttle-debounce-plugin/


当前回答

假设我们有一个回调函数“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次调用。

其他回答

它比演示更简单。

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

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

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

--

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

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

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

ref

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)

节流

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

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

消除抖动

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

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

来源:-油门和反弹

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