我对油门和去抖功能的概念有点不确定。
我们 debounce 应该在某个事件发生后调用的函数。它用于拖动,键盘等事件,目的是不会一直触发事件被触发,而是在事件系列完成时触发。通常在键入整个单词后,或者拖动或调整大小序列已结束。
我们限制 一个应该在发生一系列事件时触发的函数,但是当我们想控制它被调用的次数时。就像在拖动运动中一样,我们希望仅在距离的每x个像素上调用该函数,或者仅每隔100ms调用该函数,而不是每次触发该事件。因此,在一系列事件发生时调用油门功能,只需更少次。
这是对这些功能及其目的的正确认识吗?还有其他功能可以区分它们吗?
答案 0 :(得分:3)
是的,这是差异的一个很好的概要。
但是,您可能想强调这些方法实际上并未改变它们所调用的函数。它们只是创建一个新的函数(具有绑定速率限制行为的标识),可以根据需要经常调用,并在内部中继调用去抖动或受限制的函数。
答案 1 :(得分:1)
简而言之:
节流旨在在常量调用期间以特定间隔调用函数。 喜欢:window.scroll。 debounce 旨在在一定时间内仅调用一次函数。不管它叫了多少次。 喜欢:提交按钮点击。 这是一个例子:
//http://jsfiddle.net/1dr00xbn/
你可以看到差异。
答案 2 :(得分:1)
正如我的TL今天指出的那样,值得一提的是,在lodash中这两个函数的流行实现中:
节气门功能实际上只是防抖的特定配置:
function throttle(func, wait, options) {
let leading = true
let trailing = true
if (typeof func != 'function') {
throw new TypeError('Expected a function')
}
if (isObject(options)) {
leading = 'leading' in options ? !!options.leading : leading
trailing = 'trailing' in options ? !!options.trailing : trailing
}
return debounce(func, wait, {
'leading': leading,
'maxWait': wait,
'trailing': trailing
})
}