Получить время реакции с помощью угловых - вызвать вторую функцию при втором щелчке

Question

Я пытаюсь выполнить небольшую задачу по времени реакции в моем приложении ionic4.По сути, страница белая, когда пользователь готов, он щелкает по экрану (экран изменил цвет), затем, когда цвет снова изменится (через случайное время), я бы хотел получить время.

html code:

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

</ion-content>

.ts code

  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