使用 angular 获取反应时间 - 在第二次点击事件时调用第二个函数

Question

我正在尝试在我的 ionic4 应用程序中做一些反应时间任务。基本上，页面是白色的，当用户准备好他点击屏幕（屏幕改变颜色），然后当颜色再次改变时（在随机时间之后），我想得到时间。

html 代码：

<ion-content (click)="changeColor()" >

</ion-content>

.ts 代码

  changeColor() {
    setTimeout(() => {
      this.theme.enableColor('light-theme');
      this.time1 =  new Date().getTime();
    }, this.randomTime);
    this.changeColor2();

  }

  changeColor2() {
    this.theme.enableColor('dark-theme');
  }

theme 是我的服务，我在其中创建了 enableColor，它只是一个更改 css 属性的函数。这工作正常。

因此，当我点击屏幕时，它会在随机时间后再次改变颜色，然后当我再次点击时，我希望屏幕再次改变颜色并找到用户反应的时间。

Answer 1

您应该创建两个变量 startTime 和 endTime。
performance.now() 可能是更好的解决方案。

startTime;
endTime;

changeColor() {
setTimeout(() => {
  this.theme.enableColor('light-theme');

  const self = this;
  this.endTime = performance.now();
  document.addEventListener('click', function (event) {
    // If the clicked element doesn't have the right selector, bail
    if (!event.target.matches('.scroll-content')) return;
    //event.preventDefault();
    // Log the clicked element in the console
    console.log('changeColor1');
    console.log(self.startTime - self.endTime);
    // because bubbling...
    event.stopImmediatePropagation();
    }, false);
  }, 1000);
this.changeColor2();

}

changeColor2() 函数

changeColor2() {
  this.startTime =  performance.now();
  this.theme.enableColor('dark-theme');
  console.log('changeColor2')
}

我在stackBlitz

上做了一个简单的例子

使用 angular 获取反应时间 - 在第二次点击事件时调用第二个函数

Get reaction time using angular - call a second function at second click event

angular

ionic4