如何在一个 Observable 上使用多个 debounceTime？

Question

我有一个输入 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 中，以便向他们展示 "Your latest searches" 但我想在保存之前等待 3000 毫秒输入的值。

我知道下面的代码不起作用，但只是为了说明，我想实现与此类似的东西：

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

这是否可能以某种方式链接运算符以使用不同的 debounceTimes 执行多项操作？

Answer 1

您可能希望 share 初始订阅能够以两种独立的方式处理发出的数据吗？由于您不想在原始来源上订阅两次，您可以使用 RxJS 的 share operator。

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

如何在一个 Observable 上使用多个 debounceTime？

How can I use multiple debounceTime on one Observable?

angular

rxjs

angular2-observables