Angular 2 - 消除 keyUp 事件的抖动

如何消除在“keyUp”事件上调用的函数？

这是我的代码：

我的功能

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

My HTML

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

基本上我想要实现的是handleSearch用户停止打字后不久就会被调用。

我发现我可以使用 lodash_debounce()为此，但我还没有找到如何将其放在我的keyUp event.

UPDATE:使用 RXJS 6 管道运算符：

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

您可以创建一个 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)">