在Angular 6中滚动时异步方法冻结的问题

Question

我正在尝试在Angular 6中创建一个计时器，并想了解更多有关如何使用异步方法的信息。应该发生的是，每隔一秒，元素就会随着时间以及时间是奇数还是偶数被添加到网页中。 代码完全按预期工作，除了我在页面上滚动时。当我滚动时，计时器完全冻结，需要花费几秒钟的时间才能再次计时。

async Timer() {
 if (this.timerRunning) {
   return;
 }
 this.timerRunning = true;
 await this.resolveAfter1Seconds(20);
 this.timerRunning = false;
 this.TimerData();
}

TimerData() {
 if (!this.timerOn) {
  return;
 } else {
  this.Timer().then();
 }
 this.time++;
 if (this.time % 2 === 0) {
   this.Evens.push(this.time);
 } else {
   this.Odds.push(this.time);
 }
}

resolveAfter1Seconds(x) {
 return new Promise(resolve => {
   setTimeout(() => {
     resolve(x);
   }, 1000);
 });
}

这是HTML：

<div class="row">
  <div class="col-sm-4">
    <app-even *ngFor="let odd of Odds" [time]="odd"></app-even>
  </div>
  <div class="col-sm-4">
    <app-odd *ngFor="let even of Evens" [time]="even"></app-odd>
  </div>
</div>

我是使用Async / Await的完整newby，这可能是一个简单的问题。感谢您的帮助。