情境:
我遇到大量checkboxes
绑定到名为onChange()
的函数的情况。
我还有另一个功能,可以根据代码中的其他一些参数立即重置/更新特定的复选框。让我们调用此函数rapidFire()
现在,我想要做的只是在用户手动点击onChange()
时触发checkbox
。如果我定期运行的其他代码(重置/更新)或rapidFire()
正在更改一系列onChange()
来电的复选框,则应全部取消。
我已经实现了debounce
逻辑来捕获onChange()
代码所做的所有rapidFire()
次调用,但是,根据去抖动的性质,它仍然允许1个调用在结束后执行已经过了几毫秒。
我想要做的是cancel
在特定的毫秒阈值内进行的所有函数调用,假设它们是由更新/重置或rapidFire()
代码生成的。我还假设,如果人员点击了一个复选框,则他们很难在250 ms
或类似的时间范围内点击另一个。
这是我在this帖子的帮助下实施的辩护代码
limitedOnChange = this.debounce(this.onChange, 250);
onChange(event) { console.log('change detected: ', event) }
debounce(fn, delay) {
let timer = null;
return function () {
const context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
在HTML方面:
<ss-multiselect-dropdown (ngModelChange)="limitedOnChange($event)"></ss-multiselect-dropdown>
重新解释我的问题:如何更改此去抖功能,以便在连续触发时取消所有函数调用,并且只允许在阈值内进行一次函数调用(模仿人工交互)?
答案 0 :(得分:-2)
而不是使用复选框的onchange事件绑定onChange()函数,而不是使用onclick事件将其绑定。
这样,只有当单击复选框时,才会调用该函数。