javascript - 在时间跨度内收集键盘输入

Question

我正在使用 Angular 10 并尝试使用 RXJS 在一定时间内收集 window:keyup 事件 - 但不幸的是根本不是很成功。基本上我想输入数据，如果在一定时间内没有按下任何键，则应该提交请求。

fromEvent(window, 'keyup').pipe(
  map((ev: KeyboardEvent) => ev.key),
  scan((acc, value) => acc + value),
  debounceTime(500)
).subscribe(key => {
  console.log(key);
});

这就是我的基本方法，基本上就是做我想做的，但我无法删除订阅结果中的扫描结果。

是否有更好的方法来实现我想要的行为？

Answer 1

我发现的一种方法是同时使用 Subject，并让它发出 Observable 的结果，该 Observable 为每个生成的字符串设置并销毁自身:

const result$ = new Subject<string>();

fromEvent(window, 'keyup').pipe(
  exhaustMap(key => fromEvent(window, 'keyup').pipe(
    takeUntil(result$),
    startWith(key),
    map((event: KeyboardEvent) => event.key),
    scan((acc, curr) => acc + curr),
    debounceTime(500),
    tap(val => result$.next(val)),
  )),
).subscribe();

result$.subscribe(console.log); // here you would do your request logic, 
                                // and make sure to set it to unsubscribe 
                                // (with a takeUntil and a destroy$ Subject, for example).

当按下第一个键时，它会设置外部 Observable。然后它创建内部 Observable，观察每个按下的键，直到 500 毫秒的反跳时间过去，此时它会导致 Subject 发射。同一个 Subject 的发射然后杀死内部 Observable，允许外部 Observable 再次启动。不要忘记对 Subject 和外部 Observable 使用取消订阅方法。