JS властивість Event.timeStamp

Загальний опис

timeStamp — це властивість об'єкта Event, яка повертає кількість мілісекунд, що минули з моменту завантаження документа до моменту, коли подія була ініційована. Це дозволяє програмістам вимірювати час, коли подія сталася, і робити обчислення часу між різними подіями на сторінці. Значення timeStamp не є абсолютним часом, а відноситься до старту завантаження сторінки.

Значення timeStamp використовується для вимірювання продуктивності, обчислення затримок між подіями, а також для відстеження інтервалів між діями користувача. Це може бути корисно, наприклад, для визначення швидкості реакції користувача при обробці послідовних подій, як натискання клавіші або кліків миші.

Приклад використання:

document.addEventListener('click', function(event) {
  console.log(`Подія сталася через ${event.timeStamp} мс після завантаження сторінки`);
});

У цьому прикладі ми додаємо обробник подій для події click і виводимо значення timeStamp, яке показує, скільки мілісекунд минуло від моменту завантаження сторінки до моменту кліку.

Хоча значення timeStamp зазвичай вимірюється в мілісекундах, варто пам'ятати, що в деяких середовищах (зокрема в браузерах із високою точністю таймерів) це значення може мати більшу точність і включати мікросекунди. Це важливо враховувати під час вимірювання продуктивності або часу реакції.

Однак слід звернути увагу на те, що в різних браузерах значення timeStamp може дещо відрізнятися, оскільки залежить від початкового часу завантаження документа. В сучасних браузерах ця властивість корисна для синхронізації подій та обчислення часу між ними.

правити

Порада

timeStamp може допомогти вам у відстеженні продуктивності вашого інтерфейсу. Якщо між подією і її обробкою є велика затримка, це може вказувати на проблеми з продуктивністю або завантаженням ресурсу.

автор: Bond правити

Порада

Для складних взаємодій, таких як обробка мультитач жестів, timeStamp дозволяє точно відстежити, коли кожен палець торкається екрана. Це дає можливість створювати більш інтуїтивні інтерфейси, що реагують на жести користувачів.

автор: Bond правити

Порада

Крім того, ви можете використовувати timeStamp для анімацій або тимчасових ефектів, забезпечуючи точний контроль часу між подіями. Наприклад, ви можете запустити анімацію через певний проміжок часу після натискання на кнопку.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

event.timeStamp

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1.5	1	12.1	12

Підтримка: мобільні переглядачі

Переглядач
	1	18	4	1

Підтримка: серверні переглядачі

Переглядач
	14.5.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

let lastKeyDownTime = 0;

document.addEventListener('keydown', function(event) {
  if (lastKeyDownTime) {
    const timeBetweenKeys = event.timeStamp - lastKeyDownTime;
    console.log(`Час між натисканням клавіш: ${timeBetweenKeys} мс`);
  }
  lastKeyDownTime = event.timeStamp;
});

let lastClickTime = 0;

document.addEventListener('click', function(event) {
  const clickInterval = event.timeStamp - lastClickTime;
  
  if (lastClickTime && clickInterval < 300) {
    console.log('Подвійний клік!');
  } else {
    console.log('Одиночний клік');
  }
  
  lastClickTime = event.timeStamp;
});