JS властивість Event.timeStamp
Загальний опис
timeStamp — це властивість об'єкта Event, яка повертає кількість мілісекунд, що минули з моменту завантаження документа до моменту, коли подія була ініційована. Це дозволяє програмістам вимірювати час, коли подія сталася, і робити обчислення часу між різними подіями на сторінці. Значення timeStamp не є абсолютним часом, а відноситься до старту завантаження сторінки.
Значення timeStamp використовується для вимірювання продуктивності, обчислення затримок між подіями, а також для відстеження інтервалів між діями користувача. Це може бути корисно, наприклад, для визначення швидкості реакції користувача при обробці послідовних подій, як натискання клавіші або кліків миші.
Приклад використання:
document.addEventListener('click', function(event) {
console.log(`Подія сталася через ${event.timeStamp} мс після завантаження сторінки`);
});
У цьому прикладі ми додаємо обробник подій для події click і виводимо значення timeStamp, яке показує, скільки мілісекунд минуло від моменту завантаження сторінки до моменту кліку.
Хоча значення timeStamp зазвичай вимірюється в мілісекундах, варто пам'ятати, що в деяких середовищах (зокрема в браузерах із високою точністю таймерів) це значення може мати більшу точність і включати мікросекунди. Це важливо враховувати під час вимірювання продуктивності або часу реакції.
Однак слід звернути увагу на те, що в різних браузерах значення timeStamp може дещо відрізнятися, оскільки залежить від початкового часу завантаження документа. В сучасних браузерах ця властивість корисна для синхронізації подій та обчислення часу між ними.
| Порада: |
|
| Порада: | Для складних взаємодій, таких як обробка мультитач жестів, |
| Порада: | Крім того, ви можете використовувати |
Синтаксис
event.timeStampЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1.5 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
1 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
14.5.0 |
1.0 |
Приклади
Цей код відстежує час між кліками за допомогою властивості event.timeStamp. Якщо інтервал між кліками менший за 500 мс, це вважається "подвійним кліком". Користувач може натискати на кнопку, а результат відображатиметься у вигляді повідомлення з часом між кліками.
У цьому прикладі ми відстежуємо час між натисканням клавіш. Кожен раз, коли користувач натискає клавішу, обчислюється час, що минув з моменту попереднього натискання, що може бути корисно для вимірювання швидкості набору тексту або обробки клавішних скорочень.
let lastKeyDownTime = 0;
document.addEventListener('keydown', function(event) {
if (lastKeyDownTime) {
const timeBetweenKeys = event.timeStamp - lastKeyDownTime;
console.log(`Час між натисканням клавіш: ${timeBetweenKeys} мс`);
}
lastKeyDownTime = event.timeStamp;
});Цей приклад демонструє, як можна використовувати timeStamp для визначення подвійного кліку миші. Якщо інтервал між двома кліками менший за 300 мс, це вважається подвійним кліком. Такий підхід часто використовується для обробки спеціальних дій, пов'язаних із швидким натисканням, наприклад, у графічних інтерфейсах або текстових редакторах.
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;
});