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>

使用setInterval（）函数在JavaScript中实现此代码，参数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

Angular 4 Timer up ticking太快

1 个答案: