为什么我的 RxJS 倒计时时钟没有显示? [英] Why is my RxJS countdown clock not displaying?

问题描述

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

I am working on an Angular 9 quiz app and I'm using RxJS for the countdown timer (in containersscoreboard ime ime.component.ts) and the timer doesn't seem to be displaying. The stopTimer() function should stop the timer on the number of seconds on which it is stopped. The timer should stop after the correct answer(s) are selected and the timer should reset in between questions. The time elapsed per question should be saved into the elapsedTimes array. Please see my code for the timer in the TimeComponent on Stackblitz: https://stackblitz.com/edit/angular-9-quiz-app. Thank you.

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

The code below is my first start with building a countdown clock with RxJS. My most recent code is on 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()，因此我可以从不同的组件调用它们.

I use stopTimer() and pauseTimer() in my TimerService so I can call them from a different component.

推荐答案

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

i have fixed your stackblitz. Based on your call of timerservice methods, your timer will behave

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

And no need to set elapsed time in teardown logic. it will automatically push whenver timer will stop.

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

Stackblitz Url :- 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)));

在记分板组件参数订阅中，我重置了计时器，因此只要问题发生变化，它就会重置.

In scoreboard component params subscribe i have reset the timer, so it will reset whenever question will change.

这篇关于为什么我的 RxJS 倒计时时钟没有显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！