Question

我在角度2中使用 rxjs / Rx 创建一个时钟并从中获得一圈和Sprint时间圈。代码块如下：
HTML：（app.component.html）

<div class="row">
    <div class="col-xs-5">
        <div class="row">
            <div class="col-xs-6">
                <h2>Lap Time</h2>
                <ul *ngFor="let lTime of lapTimes">
                    <li>{{lTime}}</li>
                </ul>
            </div>
            <div class="col-xs-6">
                <h2>Sprint Time</h2>
                <ul *ngFor="let sTime of sprintTimes">
                    <li>{{sTime}}</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-xs-5">
        <h1>Current Time: {{timeNow}}</h1>
        <div>
            <button type="button" class="btn btn-large btn-block btn-default" (click)="onStart()">Start Timer</button>
            <button type="button" class="btn btn-large btn-block btn-default" (click)="onLoop()">Sprint and Lap</button>
            <button type="button" class="btn btn-large btn-block btn-default" (click)="onStop()">Stop Timer</button>
        </div>
    </div>
</div>

TypeScript：（app.component.ts）

import { Component } from '@angular/core';
import { Observable, Subscription } from 'rxjs/Rx';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

sprintTimes: number[] = [0];
lapTimes: number[] = [0];
timeNow: number = 0;
timer: Observable<any> = Observable.timer(0, 1000);
subs: Subscription;

onStart () {
  this.subs = this.timer.subscribe((value) => {
    this.tickerFunc();
  });
  // this.onLoop();
}

onLoop () {
  this.onLap();
  this.onSprint();
}

onSprint () {
  this.sprintTimes.push(this.timeNow);
}

onLap () {
  this.lapTimes.push(this.timeNow - this.sprintTimes[this.sprintTimes.length - 1]);
}

onStop () {
  this.subs.unsubscribe();
}

tickerFunc () {
  this.timeNow++;
}

}

这允许我创建一个时钟功能。但是 Rxjs / Rx 没有足够的文件记录（我很难通过其文档来理解它。）有没有更好的方法来完成我在角落里做的工作？（我的主要目的是：我想进行在线考试/模拟测试。）
当我按下开始时钟按钮两次时，我的时钟速度快了两倍。（我不明白这种行为）
还有其他第三方工具可以让这更容易吗？

很抱歉我的Type Script代码没有正确缩进，我发现很难使用文本编辑器。而且这不是做作业的地方。

Answer 1

当我按两次开始时钟按钮时，我的时钟速度快了两倍。（我不明白这种行为）

好吧，当您单击此按钮时，您执行该代码：

this.subs = this.timer.subscribe((value) => {
  this.tickerFunc();
});

因此，每次单击该按钮时，都会启动一个新的计时器，每次计时器发出一个事件（即每秒），执行

tickerFunc () {
  this.timeNow++;
}

因此，如果您单击按钮一次，则每次定时器发出时，即每秒递增this.timeNow。

如果再次单击它，则每次第一个计时器发出时，每次第二个计时器发出时，都会增加它。所以，每秒两次。

如果计时器已经启动，你似乎不应该启动计时器。因此，如果计时器已经启动，请禁用该按钮。

Answer 2

您必须拨打取消订阅才能停止之前的计时器。

onStart () {
  if (this.subs) {
    this.subs.unsubscribe(); // Stop previous timer
  }
  this.subs = this.timer.subscribe((value) => {
    this.tickerFunc();
  });
  // this.onLoop();
}

使用Observable Timer制作时钟系统

2 个答案: