角2 - keyUpイベントのデバウンス

Question

「keyUp」イベントで呼び出される関数をデバウンスするにはどうすればよいですか？ここで

は私のコードです：

My機能

private handleSearch(searchTextValue: string, skip?: number): void { 
    this.searchTextValue = searchTextValue; 
    if (this.skip === 0 || typeof skip === "undefined") { 
     this.skip = 0; 
     this.pageIndex = 1; 
    } else { 
     this.skip = skip; 
    } 
    this.searchTextChanged.emit({ searchTextValue: searchTextValue, skip: this.skip, take: this.itemsPerPage }); 
} 

マイHTML

<input type="text" class="form-control" placeholder="{{ 'searchquery' | translate }}" id="searchText" #searchText (keyup)="handleSearch(searchText.value)"> 

Bassically私が達成しようとしていることhandleSearchが呼び出されるということですユーザーが入力をやめた後すぐに。

私はlodashの_debounce()を使用できることを知りましたが、これを私のkeyUpイベントにどのように入れるのか分かりませんでした。

Answer 1

rxjs/Subjectを作成し、keyupで.next（）を呼び出し、希望するdebounceTimeでサブスクライブすることができます。

私はそれが正しい方法であるかどうかは分かりませんが、うまくいきます。

private subject: Subject<string> = new Subject(); 

ngOnInit() { 
    this.subject.debounceTime(500).subscribe(searchTextValue => { 
    this.handleSearch(searchTextValue); 
    }); 
} 

onKeyUp(searchTextValue: string){ 
    this.subject.next(searchTextValue); 
} 

HTML：

<input (keyup)="onKeyUp(searchText.value)">