直接不绑定按钮时去抖功能不起作用

Question

我正在尝试使用 Ben Alman 的 debounce code。我有以下代码，但我根本看不到任何执行。

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>

选中这些 select 框时，它们会持续触发 onChange()，但我没有看到 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>

直接不绑定按钮时去抖功能不起作用

Debounce function does not work when directly not bound to a button

javascript

jquery

angular

debounce