JavaScript свойство Event.timeStamp

Определение и применение

Свойство Event.timeStamp возвращает время создания события в миллисекундах относительно начала отсчёта времени текущего глобального объекта (performance.timeOrigin), а не Unix-эпохи.

Значение имеет тип DOMHighResTimeStamp. Для приблизительного времени в шкале Unix можно сложить performance.timeOrigin и event.timeStamp из того же глобального контекста.

Поддержка браузерами

Спецификация: dom.spec.whatwg

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьapi.Event.timeStamp
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
timeStamp✓1

Версия 1 выпущена в 2008 г.

Примечание MDN (англ.)

Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.

✓12✓1.5

Версия 1.5 выпущена в 2005 г.

Примечание MDN (англ.)

Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.

✓≤12.1

Поддержка появилась не позднее версии 12.1 (2012 г.)

Примечание MDN (англ.)

Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.

✓1✓18

Версия 18 выпущена в 2012 г.

Примечание MDN (англ.)

Starting with Chrome Android 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.

✓4

Версия 4 выпущена в 2011 г.

Примечание MDN (англ.)

Starting with Chrome 49, Firefox for Android 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.

✓≤12.1

Поддержка появилась не позднее версии 12.1 (2012 г.)

Примечание MDN (англ.)

Starting with Chrome 49, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.

✓1✓1.0

Версия 1.0 выпущена в 2013 г.

Примечание MDN (англ.)

Starting with Samsung Browser 5.0, Firefox 54 and Opera 36, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.

✓1

Версия 1 выпущена в 2008 г.

Примечание MDN (англ.)

Starting with version 49, this property returns DOMHighResTimeStamp instead of DOMTimeStamp.

✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

JavaScript синтаксис

JavaScript
event.timeStamp;

Спецификация

DOM Standard.

Пример использования

Время между двумя нажатиями

Нажмите ▶, затем несколько раз кнопку в результате: после второго нажатия под кнопкой появится время в миллисекундах между соседними нажатиями.

index.html
HTML
<div>
  <button>Нажми на меня</button>
  <p></p>
</div>
main.js
JavaScript
const button = document.querySelector('button'), // находим первый элемент <button> в документе
    p = document.querySelector('p') // находим первый элемент <p> в документе
let last, // объявляем две пустые переменные
    difference
button.addEventListener('click', showDifference) // регистрируем обработчик события "click" для элемента <button>

function showDifference(event) {
    if (last) {
        // если переменная содержит значение получаем разницу
        difference = event.timeStamp - last
        p.innerHTML += 'Время с момента последнего события (миллисекунд): ' + difference + '<br>'
    } else {
        p.innerHTML = 'Нажми еще, пожалуйста.<br>'
    }
    last = event.timeStamp
}
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере мы с использованием метода querySelector() выбрали первый HTML элемент <button> и элемент <p> в документе. С помощью метода addEventListener() зарегистрировали обработчики события "click" (нажатие левой кнопкой мыши на элементе) для элемента <button>.

При нажатии на кнопку мы запускаем обработчик события, который запоминает значение свойства timeStamp — время создания события в миллисекундах относительно performance.timeOrigin. При последующих кликах по кнопке это число будет вычитаться из текущего значения свойства timeStamp.

С помощью свойства innerHTML мы вставляем содержимое в элемент <p>. Обратите внимание, что после первого нажатия вставляется только текстовое содержимое с просьбой о повторном нажатии.