直接没有绑定到按钮时防抖功能不起作用

Question

我正尝试使用Ben Alman的debouncecode。我有下面的代码，但我没有看到任何执行。

onChange() { 
     var this_ = this 
     if (this.autoRefreshOn) { 
      Cowboy.debounce(function(e) { 
       console.log("debounce worked"); 
       this_.doSomethingFunction(); 
      }, 250); 
     } 
    } 

这onChange()功能从multiselect箱解雇这样的：

<ss-multiselect-dropdown (ngModelChange)="onChange($event)"></ss-multiselect-dropdown> 
<ss-multiselect-dropdown (ngModelChange)="onChange($event)"></ss-multiselect-dropdown> 
<ss-multiselect-dropdown (ngModelChange)="onChange($event)"></ss-multiselect-dropdown> 
<ss-multiselect-dropdown (ngModelChange)="onChange($event)"></ss-multiselect-dropdown> 

当这些选择复选框被选中，他们连续射击onChange()，但我没有看到从debounce功能的执行。

我在网上找到的所有例子都实现了一个debounce函数，它绑定到一个按钮按钮或类似的东西。

Answer 1

您可以直接直接在你的模板中添加防抖动您onChange()方法，并调用新创建的去抖方法：

component.ts

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); 
    }; 
    } 

component.html

<ss-multiselect-dropdown (ngModelChange)="limitedOnChange($event)"></ss-multiselect-dropdown>