谁能给我一个简单的解释,关于节流和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/
当前回答
如何debound工作在硬件。
去噪是从数字信号中去除噪声的过程。当一个按钮被按下时,信号反弹会导致该按钮被注册为被按了多次。反弹消除了这种噪音,因此按钮只被记录为被按下一次。想象一把尺子在桌子边上弹跳,再想象开关里的金属触点像这样弹跳。
更好的是,看看这张图,显示了由弹跳引起的开关噪声。
我们使用适当计算额定值的电阻和电容来平滑信号n毫秒。
解释信号节流如何在硬件中工作。
信号节流是限制信号注册次数的过程。这通常用于防止一个按钮被注册为在短时间内被多次按下。
我更喜欢“门控”这个词,但那是因为我从事电子音乐制作。
我们在每个节流阀周期结束时打开闸门,并允许信号通过,然后再次关闭闸门,为下一个节流阀周期。
解释如何debounging工作在软件。
软件中的debound通常是通过使用定时器来实现的。当按钮被按下时,计时器开始。如果在计时器到期前再次按下按钮,计时器将被重置。这确保了按钮只能注册为每个弹跳周期被按下一次。
在debounce的许多实现中,我们创建了函数的debounce版本,该版本嵌入到包含计时器(或门)的闭包中。当计时器延迟过期时,我们再次将其设置为空。实际函数只在计时器为空时运行。通常,这意味着当我们第一次调用debpublished函数时,它将运行一次,然后对它的后续调用将有效地取消,直到延迟时间结束。
在debounce的某些实现中,当调用流被触发且计时器未过期时,计时器将重新启动。仅在反弹停止后调用该函数。这通常被称为尾随反弹。
解释在软件中节流是如何工作的。
软件中的节流通常是通过使用计数器来完成的。当按下按钮时,计数器增加。如果在计数器达到某一阈值之前再次按下按钮,计数器将复位。这限制了在给定的时间内按钮可以被注册为被按下的次数。最好把它想象成一个脉冲或节拍,当呼叫被发送到油门时,它会打开和关闭一个门。
速率限制是考虑节流阀的另一种方式。
为什么这是造成困惑的常见原因?
在许多用例中,debounce或throttle将为您带来您想要的结果,特别是如果您正在使用的软件实现允许您链接、跟踪或引导您的throttle / debounce。
尽管如此,我希望这里所有的答案和这个问题都能帮助你更清楚地理解。
它们非常相似。
其他回答
Throtle只是debounce的包装器,它使debounce在一段时间内调用传递的函数,如果debounce在一段时间内延迟函数调用,该时间大于Throtle中指定的时间。
debound允许您管理函数可以接收的调用频率。它将发生在给定函数上的多个调用组合在一起,以便忽略在特定时间持续时间到期之前发生的重复调用。从根本上说,deboundation确保了一个可能发生多次的事件只发送了一个信号。
节流将函数接收的调用频率限制在固定的时间间隔内。它用于确保目标函数的调用频率不会超过指定的延迟。节流是降低重复事件的速率。
debound使函数只能在最后一次调用后的一段时间后执行
function debounce(func,wait){
let timeout
return(...arg) =>{
clearTimeout(timeout);
timeout= setTimeout(()=>func.apply(this,arg),wait)
}
}
function SayHello(){
console.log("Jesus is saying hello!!")
}
let x = debounce(SayHello,3000)
x()
节流模式限制了在一段时间内可以调用给定事件处理程序的最大次数。它允许以指定的时间间隔周期性地调用处理程序,忽略该等待期结束之前发生的每个调用。
function throttle(callback, interval) {
let enableCall = true;
return (...args)=> {
if (!enableCall) return;
enableCall = false;
callback.apply(this, args);
setTimeout(() => enableCall = true, interval);
}
}
function helloFromThrottle(){
console.log("Jesus is saying hi!!!")
}
const foo = throttle(helloFromThrottle,5000)
foo()
简单来说:
节流将延迟执行函数。它将减少多次触发事件的通知。 deboundation将一系列对函数的连续调用合并为对该函数的单个调用。它确保为多次触发的事件发出一个通知。
你可以直观地看到其中的区别
如果你有一个函数被调用了很多次——例如当一个调整大小或鼠标移动事件发生时,它可以被调用很多次。如果您不想要这种行为,您可以Throttle它,以便定期调用该函数。deboning将意味着它在一系列事件的结束(或开始)时被调用。
这里真正重要的是,用最简单的话说:如果你有一些连续重复一段时间的操作(如鼠标移动,或页面大小调整事件),你需要运行一些函数来响应,但你不想对每个操作都做出反应(因为这可能会损害性能),你有两个选择:
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...