谁能给我一个简单的解释,关于节流和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/
当前回答
简单来说:
节流将延迟执行函数。它将减少多次触发事件的通知。 deboundation将一系列对函数的连续调用合并为对该函数的单个调用。它确保为多次触发的事件发出一个通知。
你可以直观地看到其中的区别
如果你有一个函数被调用了很多次——例如当一个调整大小或鼠标移动事件发生时,它可以被调用很多次。如果您不想要这种行为,您可以Throttle它,以便定期调用该函数。deboning将意味着它在一系列事件的结束(或开始)时被调用。
其他回答
这实际上是限制一个事件的方法。例如,如果你正在监听onclick事件,如果它是常规的,它将监听你所做的每一次点击。
如果你使用Throttle,它会在你想要监听事件的时间之间设置一个间隔,例如每秒钟监听一次点击。
Debounce的限制更大,它只会在事件开始或结束时触发自己。例如,你正在滚动,你使用Debounce,它只会在你开始和结束滚动时触发。
通俗地说:
debound将阻止一个函数在仍然被频繁调用时运行。debound函数只在确定不再被调用后才会运行,此时它只会运行一次。脱绳的实际例子:
如果用户“停止输入”,自动保存或验证文本字段的内容:该操作将只执行一次,在确定用户不再输入(不再按键)之后。 记录用户休息鼠标的位置:用户不再移动鼠标,因此可以记录(最后)位置。
节流只会阻止最近运行过的函数运行,不管调用频率如何。节流的实际例子:
v-sync的实现是基于节流的:从上一次绘制屏幕到现在已经过去了16ms,屏幕才会被绘制。无论调用多少次屏幕刷新功能,它最多只能每16毫秒运行一次。
如何debound工作在硬件。
去噪是从数字信号中去除噪声的过程。当一个按钮被按下时,信号反弹会导致该按钮被注册为被按了多次。反弹消除了这种噪音,因此按钮只被记录为被按下一次。想象一把尺子在桌子边上弹跳,再想象开关里的金属触点像这样弹跳。
更好的是,看看这张图,显示了由弹跳引起的开关噪声。
我们使用适当计算额定值的电阻和电容来平滑信号n毫秒。
解释信号节流如何在硬件中工作。
信号节流是限制信号注册次数的过程。这通常用于防止一个按钮被注册为在短时间内被多次按下。
我更喜欢“门控”这个词,但那是因为我从事电子音乐制作。
我们在每个节流阀周期结束时打开闸门,并允许信号通过,然后再次关闭闸门,为下一个节流阀周期。
解释如何debounging工作在软件。
软件中的debound通常是通过使用定时器来实现的。当按钮被按下时,计时器开始。如果在计时器到期前再次按下按钮,计时器将被重置。这确保了按钮只能注册为每个弹跳周期被按下一次。
在debounce的许多实现中,我们创建了函数的debounce版本,该版本嵌入到包含计时器(或门)的闭包中。当计时器延迟过期时,我们再次将其设置为空。实际函数只在计时器为空时运行。通常,这意味着当我们第一次调用debpublished函数时,它将运行一次,然后对它的后续调用将有效地取消,直到延迟时间结束。
在debounce的某些实现中,当调用流被触发且计时器未过期时,计时器将重新启动。仅在反弹停止后调用该函数。这通常被称为尾随反弹。
解释在软件中节流是如何工作的。
软件中的节流通常是通过使用计数器来完成的。当按下按钮时,计数器增加。如果在计数器达到某一阈值之前再次按下按钮,计数器将复位。这限制了在给定的时间内按钮可以被注册为被按下的次数。最好把它想象成一个脉冲或节拍,当呼叫被发送到油门时,它会打开和关闭一个门。
速率限制是考虑节流阀的另一种方式。
为什么这是造成困惑的常见原因?
在许多用例中,debounce或throttle将为您带来您想要的结果,特别是如果您正在使用的软件实现允许您链接、跟踪或引导您的throttle / debounce。
尽管如此,我希望这里所有的答案和这个问题都能帮助你更清楚地理解。
它们非常相似。
将debounce和throttle放在一起可能会非常令人困惑,因为它们都共享一个称为延迟的参数。
防反跳。延迟是等到不再有调用时,再调用它。就像关闭电梯门一样:门必须等到没有人试图进入时才能关闭。
节流。延迟是以一定的频率等待,然后调用最后一个。很像手枪射击,枪只是不能超过一定的射速。
让我们看一看实现的细节。
function debounce(fn, delay) {
let handle = null
return function () {
if (handle) {
handle = clearTimeout(handle)
}
handle = setTimeout(() => {
fn(...arguments)
}, delay)
}
}
Debounce,继续中断超时,直到不再中断为止,然后触发fn。
function throttle(fn, delay) {
let handle = null
let prevArgs = undefined
return function() {
prevArgs = arguments
if (!handle) {
fn(...prevArgs)
prevArgs = null
handle = setInterval(() => {
if (!prevArgs) {
handle = clearInterval(handle)
} else {
fn(...prevArgs)
prevArgs = null
}
}, delay)
}
}
}
Throttle,存储最后一个调用参数,并设置一个间隔来触发,直到没有过去的调用。
相似之处。它们都有延迟时间,并且在延迟期间不会发生火灾,特别是当只有一场火灾时。两者都不聚合过去的事件,因此事件的数量可能与实际的火灾不同。
的区别。在有重复事件的弹跳情况下,延迟可以延长。而在节流阀情况下的延迟是固定的。所以一般来说,油门产生的火焰比反弹产生的火焰要多。
很容易记住。将组捆绑为一个。节流保持捆绑调用在一定的频率。
更新1-20-23
Throttle可能不需要setInterval,这是我最近写的一个新版本,它也照顾到了这个问题。
function throttle(fn, delay) {
let canFire = true
let queue = []
function pop() {
if (queue.length < 1) return
const [that, args] = queue.pop()
fn.apply(that, args)
canFire = false
setTimeout(() => {
canFire = true
pop()
}, delay)
}
function push() {
queue.push([this, arguments])
if (canFire) pop()
}
push.cancel = () => {
queue = []
}
return push
}
节流强制在一段时间内可以调用函数的最大次数。就像“最多每100毫秒执行一次这个函数。”
deboundation强制函数不被再次调用,直到一段时间过去而没有被调用。就像“仅在100毫秒后未被调用时才执行该函数。”
ref