단추에 직접 바인딩되지 않은 경우 디 바운스 기능이 작동하지 않습니다.

Question

Ben Alman의 debouncecode을 사용하려고합니다. 다음 코드는 있지만 실행중인 내용이 전혀 없습니다.

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

이 onChange() 기능은 다음과 같이 multiselect 상자에서 해고 :이 선택 상자들이 지속적으로 onChange()을 발사 체크

<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> 

하지만 난 debounce 기능에서 어떤 실행을 볼 수 없습니다.

웹에서 찾은 모든 예제는 버튼 누르기 또는 이와 유사한 것으로 연결되는 디버깅 기능을 구현합니다.

당신은 당신의 템플릿에서 직접 새로 만든 디 바운스 방법을 당신의 onChange() 방법에 디 바운스를 직접 추가하고 호출 할 수 있습니다

Answer 1

:

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>