angular - 如何延迟重置 Observable？

Question

我试图弄清楚如何“重置”之前有延迟的 Observable。我的目标是当我点击一个按钮时，它运行一个 Action ；在该操作结束时，在等待定义的时间后，该操作运行 finalize 以重置值。

Here is a Stackblitz of what I mean.

如果我单击“保存新事件”，它将显示一个数字。 3 秒后，数字将消失。问题是，如果我单击它一次，它会开始延迟——但是如果我在 1 秒后再次单击它，它会显示新的数字——但是 2 秒后数字消失，因为第一个 Observable 设置了 {saveSuccess: null} .

是否有一些 RXJS 魔法可以完成我想做的事情？

Answer 1

是的，确实有一些魔法可以取消每次新点击的先前延迟(我认为这就是您所追求的)

您需要在类级别使用 Subject，并在每次点击的主题上使用 next。 subject 应该在 constructor(或 ngOnInit )中设置如下，tap 操作符在 管道 中

this.subject.pipe(
    switchMap(value => {
        return timer(1000).pipe(...)
    }),
    tap(...)
).subscribe()

switchMap 将在每次后续单击时取消前一个计时器

注意:带有整数值的 timer 与 delay 的工作方式相同，但它本身是一个可观察的，而不是一个运算符