在 debounce 和 non-debounce 的合并 observables 上使用 swichMap

Question

基本上，我有 2 个 observables。

1. obseravableClickBtn 将立即发送请求

2. observableInputText 将发送请求去抖动 3 秒。

代码：

obseravableClickBtn = Observable.fromEvent(Observable.fromEvent(document.getElementsById('btnSearch'), 'click')

observableInputText = Observable.fromEvent(this.textBoxInput1.nativeElement, 'keyup')
.merge(Observable.fromEvent(this.textBoxInput2.nativeElement, 'keyup')).debounceTime(3000)

在observableInputText的3秒去抖，如果btnSearch被点击，我想取消observableInputText observable并立即发送请求

我尝试使用：

const mergeObservable=obseravableClickBtn.merge(observableInputText).switchMap(
()=>sendRequest());

但是，如果我在输入后的 3 debounce 秒内单击 btnSearch，仍然会发出 2 个请求。我一次只想要一个可观察的运行。有没有其他类似的算子函数？

Answer 1

你也可以试试 takeUntil 操作符。

searchClick$: Subject = new Subject();
obseravableClickBtn.subscribe(() => {
   // button clicked
   searchClick$.next(true);
});



 observableInputText = Observable.fromEvent(this.textBoxInput1.nativeElement, 'keyup')
    .merge(Observable.fromEvent(this.textBoxInput2.nativeElement, 'keyup')).pipe(debounceTime(3000), takeUntil(searchClick$));