Функция "Отказ" не работает, если она не привязана к кнопке

Question

Я пытаюсь использовать Бен Алмана debounce код У меня есть следующий код, но я не вижу ничего выполняющегося вообще.

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() метод и вызовите вновь созданный метод debounce прямо в вашем шаблоне:

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>