Angular 4 Timer 计时太快

debugcn 发表于 Dev

利亚姆

我正在尝试在 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 在 JavaScript 中实现此代码，每秒工作，不确定 TypeScript 中出了什么问题

斯特凡诺斯

正如@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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。