为什么我的 RxJS 倒计时时钟不显示？

Question

我正在开发一个 Angular 9 测验应用程序，我正在使用 RxJS 作为倒数计时器（在容器\记分板\time\time.component.ts 中）并且计时器似乎没有显示。 stopTimer() 函数应该在计时器停止的秒数上停止计时器。选择正确答案后计时器应停止，并且计时器应在问题之间重置。每个问题所用的时间应保存到 elapsedTimes 数组中。请在 Stackblitz 上的 TimeComponent 中查看我的计时器代码：https://stackblitz.com/edit/angular-9-quiz-app。谢谢。

下面的代码是我第一次使用 RxJS 构建倒计时时钟。我最近的代码在 Stackblitz 上。

  countdownClock() {
    this.timer = interval(1000)
      .pipe(
        takeUntil(this.isPause),
        takeUntil(this.isStop)
      );
    this.timerObserver = {
      next: (_: number) => {
        this.timePerQuestion -= 1;
          ...
        }
    };

    this.timer.subscribe(this.timerObserver);
  }

  goOn() {
    this.timer.subscribe(this.timerObserver);
  }

  pauseTimer() {
    this.isPause.next();
    // setTimeout(() => this.goOn(), 1000)
  }

  stopTimer() {
    this.timePerQuestion = 0;
    this.isStop.next();
  }

我在 TimerService 中使用了 stopTimer() 和 pauseTimer()，因此我可以从不同的组件调用它们。

Answer 1

我已经修复了你的 stackblitz。根据您对 timerservice 方法的调用，您的计时器将运行

并且无需在拆卸逻辑中设置经过时间。它会在计时器停止时自动推送。

Stackblitz 网址：- https://stackblitz.com/edit/angular-9-quiz-app-er3pjn

时间倒计时方法：-

  countdownClock() {
    const $ = document.querySelector.bind(document);
    const start$ = this.timerService.isStart.asObservable().pipe(shareReplay(1));
    const reset$ = this.timerService.isReset.asObservable();
    const stop$ = this.timerService.isStop.asObservable();
    const markTimestamp$ = fromEvent($("#mark"), "click");
    const continueFromLastTimestamp$ = fromEvent($("#continue"), "click");
    start$.subscribe((data) => console.log(data));
    this.timeLeft$ = concat(start$.pipe(first()), reset$).pipe(
      switchMapTo(
        timer(0, 1000).pipe(
          scan((acc, crt) => acc > 0? acc - 1: acc, this.timePerQuestion),
        )
      ),
      takeUntil(stop$.pipe(skip(1))),
      repeatWhen(completeSbj =>
        completeSbj.pipe(
          switchMapTo(
            start$.pipe(
              skip(1),
              first()
            )
          )
        )
      )
    ).pipe(tap((value)=>this.timerService.setElapsed(this.timePerQuestion-value)));

在记分板组件参数订阅中，我已经重置了计时器，所以只要问题发生变化，它就会重置。

Answer 2

与每个复杂问题一样，您必须将其分解为更小的、易于消化的问题。

因此，我创建了一个 StackBlitz 演示来重新创建基本功能：

• 启动计时器
• 暂时停止（标记时间戳）；例如，当所有答案都被选择
时
• 从最后一个时间戳继续
• 重置计时器
• 停止计时器

下面是代码：

const $ = document.querySelector.bind(document);

const start$ = fromEvent($('#start'), 'click').pipe(shareReplay(1));
const reset$ = fromEvent($('#reset'), 'click');
const stop$ = fromEvent($('#stop'), 'click');
const markTimestamp$ = fromEvent($('#mark'), 'click');
const continueFromLastTimestamp$ = fromEvent($('#continue'), 'click');

const src$ = concat(
  start$.pipe(first()),
  reset$
).pipe(
  switchMapTo(
    timer(0, 1000)
      .pipe(
        takeUntil(markTimestamp$),
        repeatWhen(
          completeSbj => completeSbj.pipe(switchMapTo(
            continueFromLastTimestamp$.pipe(first())
          ))
        ),
        scan((acc, crt) => acc + 1000, 0)
      )
  ),
  takeUntil(stop$),
  repeatWhen(completeSbj => completeSbj.pipe(switchMapTo(start$.pipe(skip(1), first()))))
).subscribe(console.log)

让我们来看看每个相关的部分。

---

concat(
  start$.pipe(first()),
  reset$
).pipe(switchMapTo(timer(...)))

只有当timer 之前没有启动过（start$.pipe(first())）或用户想要重置所有内容（reset$）时，timer 才会从 0 开始计数。

concat(a$, b$) 确保 b$ 不能发射，除非 a$ 完成。

---

timer(0, 1000)
  .pipe(
    takeUntil(markTimestamp$),
    repeatWhen(
      completeSbj => completeSbj.pipe(switchMapTo(
        continueFromLastTimestamp$.pipe(first())
      ))
    ),
    scan((acc, crt) => acc + 1000, 0)
  )

我们希望计时器在markTimestamp$ 发出之前一直处于活动状态。发生这种情况时，源 (timer(0, 1000)) 将被取消订阅。使用repeatWhen，我们可以决定何时重新订阅timer。也就是说，当continueFromLastTimestamp$.pipe(first()) 发出时。请务必使用first()，否则可能会多次重新订阅源。

将scan((acc, crt) => acc + 1000, 0) 放在repeatWhen 之后可确保最后一个时间戳不会丢失。例如，计时器可能从X 开始，在X+5 用户触发markTimestamp$，然后在X + 100 用户触发continueFromLastTimestamp$。发生这种情况时，计时器将发出X+6。

---

takeUntil(stop$),
repeatWhen(completeSbj => completeSbj.pipe(switchMapTo(start$.pipe(skip(1), first()))))

在stop$ 发出之前，计时器应该处于活动状态。然后，只有当用户再次触发start$ 时，它才能重新启动。使用skip(1) 是因为我们没有使用start$ 的shareReplay 和first() 使用的ReplaySubject 缓存的值，因为source 应该是re - 订阅 仅一次。

---