角度 4 计时器滴答作响太快

Question

我正在尝试在 Angular 4 中创建一个简单的计时器，它每秒都会滴答作响，但是当运行以下代码时，它滴答作响的速度太快了。

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-clock',
  templateUrl: './clock.component.html',
  styleUrls: ['./clock.component.css']
})
export class ClockComponent implements OnInit {
  timer: number = 0;
  constructor() {
  }
  ngOnInit() {
  }
  timeIt() {
    this.timer++;
  }
  upTick() {
    return setInterval(() => {
      this.timeIt()
    }, 1000);
  }

}

//.HTML

<p>
{{ upTick() }}
<button 
    type="submit" 
    (click)="startStop()">Start/Stop
</button>
</p>

在 JavaScript 中单独使用 setInterval（） 函数和参数 timeIt（） 和 1000 实现此代码每秒有效，不确定 TypeScript 中出了什么问题

Answer 1

正如@cartant注释中所述，角度模板被多次渲染。

因此，您一次只需要运行一个间隔。

setInterval()返回一个 id，以便您可以处理它。

稍微修改一下你的代码，我最终得到了这个

@Component({
    selector: 'main',
    template: `
   <div>
    {{timer}}
    <button (click)="startStop()">Start/Stop</button>
   </div>
    `
})
export class MainComponent implements OnInit {
    timer : number = 0;
    intervalId : number;
    constructor() {
    }

    start() {
      this.intervalId = setInterval(() => {
        this.timeIt()
      }, 1000);
    }
    stop() {
       clearInterval(this.intervalId);
       this.intervalId = -1;
    }
    startStop() {
      if(this.intervalId == -1) {
        this.start();
      }  else {
        this.stop();
      }
    }
    timeIt() {
     this.timer++;
    }
    ngOnInit() {
      this.start();
    }
}

http://plnkr.co/edit/Mu1k05WXHhijWDjahd0Y?p=preview