谁能给我一个简单的解释,关于节流和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/
当前回答
这里真正重要的是,用最简单的话说:如果你有一些连续重复一段时间的操作(如鼠标移动,或页面大小调整事件),你需要运行一些函数来响应,但你不想对每个操作都做出反应(因为这可能会损害性能),你有两个选择:
debounce - you skip all incoming actions, except the last one (the 'last one' is defined by the 'wait' time period you set for debounce function, for example, 2s - it will consider that actions flood stopped, if no actions were taken for 2s, and then it will react. This strategy is reasonable if you don't care about regular updates, you just need to react at least once. throttle - if you want to react 'on schedule', to make regular updates even if actions flood is endless, you make your function run at regular intervals (no more often, then the specified time interval), for example 2s throttling will mean that your response will be executed an once if action is taken, but no less then 2s after that. So with continuous actions flood your response will be run on 0s, 2s, 4s, 6s, 8s...
其他回答
据我所知,简单来说 节流-类似于调用setInterval(回调)的特定次数,即在事件发生的时间内调用同一函数的特定次数 和. . deboundation -类似于调用setTImeout(callbackForApi)或在事件发生后经过一定时间后调用函数。 这个链接很有用 https://css-tricks.com/the-difference-between-throttling-and-debouncing/
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)
油门(1秒):你好,我是机器人。只要你一直打我,我就会继续和你说话,但每次一秒后。如果你在一秒之前ping我的回复,我仍然会在1秒的间隔内回复你。换句话说,我就是喜欢隔一定的时间间隔回复。
弹跳(1秒):嗨,我是那个^^机器人的表弟。只要你一直ping我,我就会保持沉默,因为我喜欢在你最后一次ping我一秒钟后才回复。我不知道,是因为我的态度有问题还是因为我不喜欢打断别人。换句话说,如果您在上次调用后的1秒内一直向我请求回复,您将永远不会得到回复。是的是的…去吧!说我粗鲁就好。
节流阀(10分钟):我是一台伐木机。我将系统日志发送到我们的后端服务器,每隔10分钟。
反弹(10秒):嗨,我不是那台伐木机的表亲。(在这个想象的世界中,并不是每个脱锁器都与节流器有关)。我在附近一家餐馆当服务员。我应该让你知道,只要你一直在你的订单中添加东西,我就不会去厨房执行你的订单。只有在您上次修改订单后10秒后,我才会认为您已经完成了订单。到那时我才会去厨房执行您点的菜。
酷演示:https://css-tricks.com/debouncing-throttling-explained-examples/
服务员类比的功劳:https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf
这实际上是限制一个事件的方法。例如,如果你正在监听onclick事件,如果它是常规的,它将监听你所做的每一次点击。
如果你使用Throttle,它会在你想要监听事件的时间之间设置一个间隔,例如每秒钟监听一次点击。
Debounce的限制更大,它只会在事件开始或结束时触发自己。例如,你正在滚动,你使用Debounce,它只会在你开始和结束滚动时触发。
节流
节流强制一个函数可以被调用的最大次数 加班。就像“每100次执行一次这个函数 毫秒。”假设在正常情况下你会这样做 在10秒内运行1000次。如果你把它控制在一次 每100毫秒,它最多只执行该函数100次 次
(10s * 1,000) = 10,000ms
10,000ms / 100ms throttling = 100 maximum calls
消除抖动
撤销强制函数不再被调用,直到 一段时间过去了,它还没有被调用。就像在 “只有在100毫秒之后才执行这个函数 被称为”。
也许一个函数在短时间内被调用1000次,分散在3秒内,然后停止被调用。如果您在100毫秒时将其解除,则该函数只会在爆发结束后的3.1秒内触发一次。每次在爆发期间调用该函数时,它都会重置反弹计时器
来源:-油门和反弹