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" );
        }
    }
}

Answer 2

首先，我们在typescript中声明我们的成员函数有点不同，所以buttonClick应该看起来像这样

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

<@>在@Dai的评论中提到，在开始时获取系统时间（在ngOnInit中）并从点击系统时间中减去系统时间将需要更少的操作并且更准确。

ngOnInit() {
  this.startTime = localStorage.startTime ? JSON.parse(localStorage.startTime) : (new Date().getTime());
  localStorage.setItem('startTime', JSON.stringify(this.startTime));
}

buttonClick() {
  this.startTime = JSON.parse(localStorage.startTime);
  alert((this.startTime - (new Date().getTime())) / 1000);
}

编辑：我编辑了答案，表明你必须使用localStorage来保存值。这与上面的答案类似，但是使用了idomatic打字稿。我想前面的答案有很多es5经验，并采用这些方法（没有错）。我发现这种风格更容易，更清晰。我会推荐一个有角度的教程。尝试在他们的网站上浏览英雄并使用带有Angular Essentials插件的Visual Studio代码，因为这将使Lint和格式化你的代码，这样你就可以习惯于惯用的打字稿。欢呼声。

实施秒表最有效的方法？

2 个答案: