// create debounce
const debouncedThing = _.debounce(thing, 1000);
// execute debounce, it will wait one second before executing thing
debouncedThing();
// will cancel the execution of thing if executed before 1 second
debouncedThing.cancel()
另一个解决方案是用一个标志:
// create the flag
let executeThing = true;
const thing = () => {
// use flag to allow execution cancelling
if (!executeThing) return false;
...
};
// create debounce
const debouncedThing = _.debounce(thing, 1000);
// execute debounce, it will wait one second before executing thing
debouncedThing();
// it will prevent to execute thing content
executeThing = false;
const doTheThingAfterADelayCancellable = debounce((filter, abort) => {
if (abort) return
// here goes your code...
// or call the original function here
}, /*debounce delay*/500)
function onFilterChange(filter) {
let abort = false
if (filter.length < 3) { // your abort condition
abort = true
}
// doTheThingAfterADelay(filter) // before
doTheThingAfterADelayCancellable(filter, abort) // new wrapped debounced call
}
function cancelBounce() {
doTheThingAfterADelayCancellable(null, true)
}
作为参考,这是从Underscore中提取的经典debounce函数,在我的示例中保持不变。
// taken from Underscore.js
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
export function debounce(func, wait, immediate) {
let timeout
return function() {
let context = this, args = arguments
let later = function() {
timeout = null
if (!immediate) func.apply(context, args)
}
let callNow = immediate && !timeout
clearTimeout(timeout)
timeout = setTimeout(later, wait)
if (callNow) func.apply(context, args)
}
}
5条答案
按热度按时间flvlnr441#
如果您使用的是lodash的最新版本,则只需执行以下操作:
另一个解决方案是用一个标志:
jgovgodb2#
旧的,但增加了一个注意到任何人谁到这里。
文档(我现在正在看1.9.1)说您应该能够:
这将完成OP想做的事情(也是我想做的事情)。它不会打印控制台消息。
我从来没有能够让这个工作。我已经寻找了高和低的
.cancel()
作为承诺在Underscore文件,我找不到它。如果您使用Underscore,请使用卡洛斯Ruana的已接受答案中的flag选项。我的要求很遗憾(在我看来)不允许从Underscore升级到Lodash(在我看来)。Underscore的功能较少,但比没有Underscore的功能更多。
yftpprvb3#
Vanilla js系列,带可拆卸 Package
debounce
函数,甚至不需要使用外部函数。逻辑在wrapepr函数中完成。提供了去抖代码。*允许在去抖期间取消一个已经被调用的函数的最简单的方法是从一个可取消的回绕中调用它。实际上只需要添加3行代码和一个可选条件。
您可以使用
abort = true
再次调用它来取消它。它的工作方式是清除以前的超时fn,并像往常一样设置一个新的超时fn,但现在使用
if (true) return
路径。您也可以从另一个代码手动执行此操作...
...或将其打包并调用
cancelBounce()
作为参考,这是从
Underscore
中提取的经典debounce
函数,在我的示例中保持不变。ybzsozfc4#
我所做的是使用_.mixin创建一个_.cancellableDebounce方法,除了两行新代码外,它与原始方法几乎相同。
用途:
tgabmvqs5#
对于其他使用React和state hooks的人。将debounce事件 Package 在一个ref中,然后在其他地方访问: