如何在一个 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 中搜索的任何内容，以便向他们显示“您的最新搜索”，但我想在保存前等待 3000 毫秒 输入的值。

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

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

这是否有可能以某种方式链接操作员以不同的去抖动时间执行多项操作？

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