2

入力 html 要素があり、Observables を使用して基本的な型先行検索機能を実行しています。

コード：

   @Output() keywordChange = new EventEmitter();

   this.keyword$ = Observable.fromEvent(myInput, 'keyup');
    this.keyword$
      .map((event: any) => event.target.value)
      .debounceTime(200)
      .subscribe(keyword => this.keywordChange.emit(keyword));

したがって、基本的には、各キーアップの間に少なくとも 200 ミリ秒で入力されたキーワードをキャプチャしています。

「最新の検索」を表示するために、ユーザーが検索しているものをすべて Cookie に保存したいのですが、入力した値を保存する前に 3000 ミリ秒待ちたいと思います。

次のコードが機能しないことはわかっていますが、説明のために、これに似たものを実現したいと考えています。

    this.keyword$
      .map((event: any) => event.target.value)
      .debounceTime(200)
      .subscribe(keyword => this.keywordChange.emit(keyword))
      .debounceTime(3000)
      .subscribe(keyword => addKeyWordToLatestSearches(keyword));

これはどういうわけか、オペレーターを連鎖させて異なる debounceTimes で複数のことを行うことは可能ですか?

4

1 に答える 1

2

share最初のサブスクリプションで、発行されたデータを 2 つの独立した方法で処理できるようにしたいですか? 元のソースで 2 回サブスクライブしたくないので、RxJSのshare演算子を使用できます。

const keyupValue$ = this.keyword$
  .map((event: any) => event.target.value)
  .share();

keyupValue$
  .debounceTime(200)
  .subscribe(keyword => this.keywordChange.emit(keyword))

keyupValue$ 
  .debounceTime(3000)
  .subscribe(keyword => addKeyWordToLatestSearches(keyword));
于 2016-11-28T23:13:46.480 に答える