通过在第二次单击事件时调用第二个函数来获取反应时间

Question

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

网页代码 ：

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

主题是我的服务，我在其中创建了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上做了一个简单的例子