Question

我正在开展Angular2项目，要求用户在一定时间内回答每个问题的问题列表。

为此，我使用带有可观察量和定时器/倒计时功能的RxJ。

我不得不承认我对RxJs世界很陌生，尽管我试图理解......

这是项目的链接（我将代码限制在最低限度）： https://stackblitz.com/edit/angular-5-example-r3kvgy

用几句话说：

1-加载页面时（ngAfterViewInit），创建计时器：

  this.timerControl$ = new BehaviorSubject<any[]>([]);

this.timer$ = this.timerControl$.switchMap(
  period => Observable
    .timer(0, 1000)
    .finally(() => this.loadNextQuestion())
    .map(t => period - (t + 1) / 1)
    .takeUntil(Observable.merge(Observable.fromEvent(document.getElementById('nextQuestionButton'), 'click'), Observable.timer(period * 1000)))
);

this.timerControl$.subscribe()

2-当用户点击按钮＆＃34;开始测试＆＃34;时，执行这段代码（l1，l2和l3指的是1/2/3级问题，数字表示时间允许每个问题）：

this.test =  { 
  l1: [10,15,10,10,10], l2: [20,20,20], l3: [30,30] } ;
this.step = 2;
this.loadNextQuestion();

with：

 loadNextQuestion() {
    this.showQuestion = false;

if (!this.lastQuestion) { 

  if (this.question.l === 0) {//First question
    this.question.l = 1;
    this.question.l_i = 0;
  } else {

    if (this.question.l_i === (this.test['l' + this.question.l].length - 1)) { // We upgrade to superior level (1->2 or 2->3)
      this.question.l += 1;
      this.question.l_i = 0;
    } else {
      this.question.l_i += 1;

    }
  }

  //We load the right question from the test
  this.question.q = this.test['l' + this.question.l][this.question.l_i];

  // Launch timer with good delay
  this.delay = this.question.q;

  this.timerControl$.next(this.delay);

  // Is it the last question of the test?
  this.lastQuestion = (this.question.l === 3 && (this.question.l_i === (this.test['l3'].length - 1)))

  this.showQuestion = true;

} else {// Test finished
  alert("Finished")
}

}

3-当用户点击＆＃34;下一个问题＆＃34;时，再次触发函数loadNextQuestion

问题：在许多情况下，一切都运作良好......但是随机地，下一个问题是加载倒计时达到0

这可能发生在最后一个问题，或测试期间的任何问题。

You can see here在倒计时结束前显示弹出窗口的一种情况（对于最后一个测试问题）

重现不是一个简单的错误......你可能需要多次尝试。如果您在单击“下一步”之前等待几秒钟查看第一个问题，然后快速单击“下一步”直到最后一个问题，则可能会出现问题（弹出窗口在倒计时结束前出现）

如果你能给我一些帮助，我将非常感激！谢谢!!

带RxJs的角度计时器：随机行为

0 个答案: