谁能给我一个简单的解释,关于节流和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将阻止一个函数在仍然被频繁调用时运行。debound函数只在确定不再被调用后才会运行,此时它只会运行一次。脱绳的实际例子:
如果用户“停止输入”,自动保存或验证文本字段的内容:该操作将只执行一次,在确定用户不再输入(不再按键)之后。 记录用户休息鼠标的位置:用户不再移动鼠标,因此可以记录(最后)位置。
节流只会阻止最近运行过的函数运行,不管调用频率如何。节流的实际例子:
v-sync的实现是基于节流的:从上一次绘制屏幕到现在已经过去了16ms,屏幕才会被绘制。无论调用多少次屏幕刷新功能,它最多只能每16毫秒运行一次。
其他回答
节流强制在一段时间内可以调用函数的最大次数。就像“最多每100毫秒执行一次这个函数。”
deboundation强制函数不被再次调用,直到一段时间过去而没有被调用。就像“仅在100毫秒后未被调用时才执行该函数。”
ref
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()
deboning和throttle之间的主要区别在于,debounce在用户未在特定时间内执行事件时调用函数,而throttle在用户执行事件时以指定时间间隔调用函数。
简单来说:
节流将延迟执行函数。它将减少多次触发事件的通知。 deboundation将一系列对函数的连续调用合并为对该函数的单个调用。它确保为多次触发的事件发出一个通知。
你可以直观地看到其中的区别
如果你有一个函数被调用了很多次——例如当一个调整大小或鼠标移动事件发生时,它可以被调用很多次。如果您不想要这种行为,您可以Throttle它,以便定期调用该函数。deboning将意味着它在一系列事件的结束(或开始)时被调用。
debound允许您管理函数可以接收的调用频率。它将发生在给定函数上的多个调用组合在一起,以便忽略在特定时间持续时间到期之前发生的重复调用。从根本上说,deboundation确保了一个可能发生多次的事件只发送了一个信号。
节流将函数接收的调用频率限制在固定的时间间隔内。它用于确保目标函数的调用频率不会超过指定的延迟。节流是降低重复事件的速率。