angular - 实现秒表的最有效方法？

Question

我想跟踪用户单击按钮所需的时间。我已经解决了这个问题，但如果有的话，我会想要一个更好的解决方案。这是我所拥有的:

export class MainComponent implements OnInit {

    timer : number = 0;
    intervalId : number;

    constructor() {
      this.intervalId = setInterval(() => {
        this.timer++;
      }, 1000);
    }

    ngOnInit() {}

    buttonClick = function() {
    alert(this.timer);
    this.timer = 0;
    }
}

Answer 1

使用 performance.now() 获得准确的时间戳(或回退到 new Date().getTime())并计算 UI 更新回调的差异(通过 setInterval)。不要使用 setInterval 本身来计算时间 - 您不能假设 setInterval 调用实际上每 1000 毫秒精确调用一次。

请注意，我还将计时器逻辑移到了 ngOnInit 函数而不是 constructor。

export class MainComponent implements OnInit {

    private start: number = null;
    private uiTimerId: number = null;

    constructor() {
    }

    private updateUI(): void {

        let delta = performance.now() - this.start;
        this.someUIElement.textContent = delta.toFixed() + "ms";
    }

    ngOnInit() {

        this.start = parseFloat( window.localStorage.getItem( "timerStart" ) );
        if( !this.start ) {
            this.start = performance.now();
            window.localStorage.setItem( "timerStart", this.start );
        }

        this.uiTimerId = window.setInterval( this.updateUI.bind(this), 100 ); // 100ms UI updates, not 1000ms to reduce UI jitter
    }

    buttonClick = function() {
        if( this.uiTimerId != null ) {
            window.clearInterval( this.uiTimerId );
            window.localStorage.removeItem( "timerStart" );
        }
    }
}