RXJS 处理两个不同的事件，其中第一个事件必须取消第二个事件

rxjs 对我来说非常具有挑战性，我发现自己一直在尝试解决这个问题。我在堆栈上找到的最接近的解决方案是使用合并运算符。这里是link https://stackoverflow.com/questions/45495188/rxjs-fromevent-to-handle-multiple-events

我正在 Angular 2 工作。

我有一个 html 输入搜索字段

<input (keydown.enter)="setFocus()" id="search-box" name="input-box" class="search-box" type="text" placeholder="Client search" (focus)="clearWarnings()" />

用户在字段框中键入内容，将在预设的延迟后触发相应的功能。用户也可以按回车键（和搜索图标）来触发搜索。我的目标是每当用户按下回车键时，去抖不应触发搜索，因为它已经在运行。

这是到目前为止使用合并函数的代码，尽管它似乎没有按照我想要的方式工作。

ngAfterViewInit() {
        this.currentMember = this.appHelpersService.getLocalStorageSearchedRim();
        if (this.currentMember) {
            this.searchService.changeSearchTerm(this.currentMember);
        }

        var waitTime = AppConstants.SEARCH_TEXT_WAITTIME;
        const searchSource = document.getElementById("search-box");
        const keydownStream = fromEvent(this.elementRef.nativeElement, 'keyup');
        const inputStream = fromEvent(searchSource, "input");
        const allStreams = merge(keydownStream, inputStream);
        allStreams
            .pipe(
                map((event: KeyboardEvent | MouseEvent) => (<HTMLInputElement>event.target).value.trim()),
                filter((searchTerm: string) => {
                    waitTime = Number(searchTerm) ? AppConstants.SEARCH_NUMERIC_WAITTIME : AppConstants.SEARCH_TEXT_WAITTIME;
                    return searchTerm.length >= 2;
                }),
                debounce(() => timer(waitTime)),
                distinctUntilChanged()
            )
            .subscribe((searchTerm: string) => {
                this.showProgressbar = true;
                this.listSearchResults(searchTerm);
            });

    }

以及回车键事件：

 setFocus(): void {
        const searchBox: HTMLElement = document.getElementById("search-box");
        const searchTerm = (<HTMLInputElement>searchBox).value;
        if (searchTerm && searchTerm.length > 0) {
            this.listSearchResults(searchTerm);
        }
        searchBox.focus();
    }

在解决方案中，我提到合并在一起的所有事件都会触发该函数，但不一定会取消正在等待的其他事件（反跳）。

感谢您抽出时间

我认为您的代码片段中有一些错误

const keydownStream = fromEvent(this.elementRef.nativeElement, 'keyup');

应该

const keyupStream = fromEvent(this.elementRef.nativeElement, 'keyUp');

你真的不需要另一个fromEvent自从你的keyupStream已经具有来自的值input

您的 Enter 函数调用和搜索“typeahead”函数调用必须包装在可观察对象中才能取消它们。

鉴于他们是你可以做类似的事情

const search$ = fromEvent(this.search.nativeElement, 'keyup').pipe(share());
const searchKeyEnter$ = search$.pipe(filter((e: KeyboardEvent) => e.keyCode === 13 || e.which === 13))
const searchText$ = search$.pipe(filter((e: KeyboardEvent) => e.keyCode !== 13 && e.which !== 13), debounceTime(500))

const mergeKeyDown = merge(searchText$.pipe(mapTo('search')), searchKeyEnter$.pipe(mapTo('enter')))
  .pipe(
  withLatestFrom(search$),
  filter(([origin, data]) => data.target.value.length > 2),
  distinctUntilChanged(),
  switchMap(([origin, data]) => {
    if (origin === 'search') {
      console.log('search started')
      return of('').pipe(delay(3000), tap(() => console.log('search call has finished')))
    } else {
      return of('').pipe(tap(() => console.log(' i got called from enter')));
    }
  })
  ).subscribe(() => { })

这里发生的事情是我们共享用户输入内容的事件

fromEvent(this.search.nativeElement, 'keyup').pipe(share());

这样我们就可以分发它来创建和组合特定类型的新可观察量

仅使用 Enter 键的示例：

search$.pipe(filter((e: KeyboardEvent) => e.keyCode === 13 || e.which === 13))

We use mapTo http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-mapTo这样我们就可以区分哪个事件被触发了。

当任何这些事件被触发时，我们希望再次重用刚刚从输入更新的值与最新来自 http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-withLatestFrom.

现在为了取消任何正在进行的异步任务切换映射 http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-switchMap可以使用运算符。

使用 Observables 时的一件大事是创建它们，以便您可以reuse and 创作它们.

我创建了一个 stackblitz，你可以 fork 并亲自尝试一下，注意控制台。

https://stackblitz.com/edit/merging-events?file=src/app/app.component.ts https://stackblitz.com/edit/merging-events?file=src/app/app.component.ts

希望这可以帮助！