谁能给我一个简单的解释,关于节流和debounging函数之间的区别,以限制速率的目的。
在我看来,两者的作用是一样的。我查看了这两个博客来找出答案:
http://remysharp.com/2010/07/21/throttling-function-calls
http://benalman.com/projects/jquery-throttle-debounce-plugin/
谁能给我一个简单的解释,关于节流和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次调用。
其他回答
节流强制在一段时间内可以调用函数的最大次数。就像“最多每100毫秒执行一次这个函数。”
deboundation强制函数不被再次调用,直到一段时间过去而没有被调用。就像“仅在100毫秒后未被调用时才执行该函数。”
ref
一幅图胜过千言万语
节气门
防反跳
注意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)
lodash库建议以下文章https://css-tricks.com/debouncing-throttling-explained-examples/详细解释Debounce和Throttle之间的区别及其起源
一个现实生活中的类比帮助我记住:
谈话结束。你等对方说完再回答。 鼓形钻头。你只在简单的4/4鼓位上演奏音符。
debounce的用例:
打字。你想在用户停止输入后做一些事情。所以在最后一次击键后等待1秒是有意义的。每次击键重新启动等待。 动画。当用户停止将鼠标悬停在某个元素上时,需要将其收缩。不使用debounce可能会导致不稳定的动画,因为光标会无意中在“热”和“冷”区域之间移动。
节流的用例:
滚动。你想要对滚动做出反应,但限制所做的计算量,所以每100毫秒做一些事情就足以防止潜在的延迟。 鼠标移动。与滚动相同,但用于鼠标移动。 API调用你想在某些UI事件上触发API调用,但想限制API调用的数量,以免使服务器过载。