Angular 2 - Entprellen eines keyUp-Ereignisses

Question

Wie kann ich eine Funktion entprellen, die bei einem "keyUp" -Ereignis aufgerufen wird?

Hier ist mein Code:

Meine Funktion

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

Mein HTML

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

bassically, was ich versuche zu erreichen, dass handleSearch ein aufgerufen wird Wenige Augenblicke nachdem der Benutzer die Eingabe beendet hat.

fand ich heraus, dass ich lodash die _debounce() dafür verwenden kann, aber ich habe nicht herausgefunden, wie diese auf meinem keyUp Ereignis zu setzen.

Answer 1

Sie könnten ein Rxjs/Subject erstellen und .next() auf keyup aufrufen und es mit Ihrer gewünschten debounceTime abonnieren.

Ich bin mir nicht sicher, ob es der richtige Weg ist, aber es funktioniert.

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