首先触发的去抖动函数然后对后续操作进行去抖动
Debounce function that fires FIRST then debounces subsequent actions
到目前为止,我见过的每个去抖动函数的例子都是防止一个动作在指定的时间跨度内发生多次,然后在指定的时间跨度过去后执行一次动作,然后重置计时器.例如,Angular Material.
中包含的 $mdUtil.debounce
函数
我正在寻找的是一个去抖功能,它立即执行动作,然后阻止后续多个动作触发,直到定时器复位。这样做的好处是,用户不必等到去抖动时间过去后才采取行动,同时仍能实现去抖动动作的目标。
有没有人见过或幸运地创造了一个?
更新 经过更多思考,去抖动函数应该立即触发操作,然后,如果在去抖动时间跨度内再次调用去抖动函数,它应该在重置计时器之前第二次触发操作,以防第二次调用更改任何值。
编辑:添加 jsbin 实现
Lodash 的 debounce 可以做到这两点。您必须指定它是前导还是尾随。
https://lodash.com/docs#debounce
_.debounce(sendMail, 300, {
'leading': true,
'trailing': false
})
您也可以在几行内编写自己的去抖动函数jsbin example:
这将首先点击,然后对后续点击进行反跳。
function debounce(func, delay) {
console.log('debounce called with delay', delay);
var timer = 0;
return function debouncedFn() {
if (Date.now() - timer > delay) {
func();
}
timer = Date.now();
};
}
到目前为止,我见过的每个去抖动函数的例子都是防止一个动作在指定的时间跨度内发生多次,然后在指定的时间跨度过去后执行一次动作,然后重置计时器.例如,Angular Material.
中包含的$mdUtil.debounce
函数
我正在寻找的是一个去抖功能,它立即执行动作,然后阻止后续多个动作触发,直到定时器复位。这样做的好处是,用户不必等到去抖动时间过去后才采取行动,同时仍能实现去抖动动作的目标。
有没有人见过或幸运地创造了一个?
更新 经过更多思考,去抖动函数应该立即触发操作,然后,如果在去抖动时间跨度内再次调用去抖动函数,它应该在重置计时器之前第二次触发操作,以防第二次调用更改任何值。
编辑:添加 jsbin 实现
Lodash 的 debounce 可以做到这两点。您必须指定它是前导还是尾随。
https://lodash.com/docs#debounce
_.debounce(sendMail, 300, {
'leading': true,
'trailing': false
})
您也可以在几行内编写自己的去抖动函数jsbin example:
这将首先点击,然后对后续点击进行反跳。
function debounce(func, delay) {
console.log('debounce called with delay', delay);
var timer = 0;
return function debouncedFn() {
if (Date.now() - timer > delay) {
func();
}
timer = Date.now();
};
}