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

问题描述

我正在使用Angular 9测验应用程序，并且我使用RxJS作为倒数计时器(在containers \ scoreboard \ time \ time.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 containers\scoreboard\time\time.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.

推荐答案

我已经修复了您的堆叠闪电问题.根据您对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 Url:- 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屋！