RxJs如何创建可观测流，并在延迟后只订阅最后一个

Question

我有三个主机侦听器，之后我将订阅Observable，我想知道这是否可能，如果可能的话，我可以创建一个具有延迟的Observable流，并只订阅延迟后的最后一个。

我宁愿使用hostlistener，也不愿使用可观察的形式事件，并将其组合在一起，所以如果这样的事情可能发生，以及如何发生，请你帮忙，这样this.authenticationService.refresh((在延迟一秒钟后只会被调用一次？

@HostListener('window:click', ['$event'])
@HostListener('window:keypress', ['$event'])
onEvent() {
if (this.isLoggedIn && this.timeOut) {
this.authenticationService
.refresh()
.pipe(take(1),
delay(1000),
takeLast(1))
.subscribe((time) => {
console.log('tu');
this.timeOut = time.expirationTime;
clearTimeout(this.userActivity);
this.setTimeout(this.timeOut);
});
}

Answer 1

我会合并这些事件，并用debounceTime运算符来管道传输合并后的结果。

merge(
fromEvent(window, "click").pipe(map(() => "clicked")),
fromEvent(window, "keypress").pipe(map(() => "pressed"))
)
.pipe(debounceTime(1000))
.subscribe(console.log);

在stackblitz上尝试同样的操作：https://stackblitz.com/edit/rxjs-df7qwg?file=index.ts

Answer 2

我认为这里不需要可观测性，你想完成的事情可以这样做：

如果你不想在新点击时重置计时器(忽略更多点击(：

debounceTime = 3000;
private currentTimeout: number;
@HostListener("window:click", ["$event"])
@HostListener("window:keypress", ["$event"])
onEvent(event) {
if (this.currentTimeout) {
return;
}
this.currentTimeout = setTimeout(() => {
this.currentTimeout = null;
this.authenticationService.refresh();
}, this.debounceTime);
}

如果你想每次点击都重置计时器：

debounceTime = 3000;
private currentTimeout: number;
@HostListener("window:click", ["$event"])
@HostListener("window:keypress", ["$event"])
onEvent(event) {
if (this.currentTimeout) {
clearTimeout(this.currentTimeout);
}
this.currentTimeout = setTimeout(() => {
this.currentTimeout = null;
this.authenticationService.refresh();
}, this.debounceTime);
}