web-dev-qa-db-ja.com

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

私のHTML

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

基本的に私が達成しようとしているのは、ユーザーが入力を停止した直後にhandleSearchが呼び出されることです

このためにlodashの_debounce()を使用できることがわかりましたが、これをkeyUpイベントに配置する方法がわかりません。

angularlodashdebounce
14
Nicolas

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

Rx/JS 6の更新。パイプオペレーターを使用します。

import { debounceTime } from 'rxjs/operators';

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

他のすべては同じですか????

16
Arron McCrory