JavaScript/Objekte/Date/now
Die Methode Date.now() ermittelt die Anzahl der Millisekunden, die seit dem 01.01.1970 00:00:00 UTC vergangen sind.
Syntax
dateObj.now()
Rückgabewert ist eine ganze Zahl, die die vergangenen Millisekunden seit dem 1. Januar 1970 00:00:00 UTC angibt.
Inhaltsverzeichnis
Anwendungsbeispiele
Die Methode Date.now() eignet sich zum Messen und Vergleichen mehrerer Zeitwerte.
Timer
Die Methode setInterval ist eigentlich dafür prädestiniert, eine Zeit entweder herauf-, oder bei einem Countdown herunterzuzählen. Da JavaScript single-threaded ist, kann es aber bei der Ausführung von Skripten zu kleineren Verzögerungen kommen, sodass solche Timer nie sekundengenau funktionieren.
Mit date.now() können Sie einen solchen Timer problemlos takten:
function timer() {
const startTime = Date.now();
let interval = setInterval(function() {
let elapsedTime = Date.now() - startTime;
document.getElementById('timer').textContent = (elapsedTime / 1000).toFixed(1);
}, 100);
}
In dieser timer-Funktion wird anfangs ein Startzeitpunkt mit Date.now() festgelegt und der Variablen startTime zugewiesen.
Mit setInterval wird nun in einer anynomen Funktion der aktuelle Zeitpunkt ermittelt und um den Startzeitpunkt vermindert.
Diese elapsedTime wird bei der Ausgabe entsprechend formatiert: mit einer Division durch 1000 erhält man die Sekunden, mit toFixed wird die Anzahl Nachkommastellen passend abgeschnitten, sodass nur Zehntelsekunden sichtbar sind.
Siehe auch:
- JavaScript/Tutorials/Timer und Countdown
- JavaScript/Window/setTimeout#Countdown
- Countdown-Leiste mit CSS-custom properties
Reaktionsspiel
var button = document.querySelector('button'),
clickedTime,
createdTime,
reactionTime;
button.addEventListener('click', evaluateResponse);
function makeButton() {
var time = rand(1,3000);
setTimeout(function() {
var top = rand(1,300),
left= rand(1,500);
button.style.top = top + 'px';
button.style.left = left + 'px';
button.style.display = 'block"'
createdTime = Date.now();
}, time);
}
function evaluateResponse() {
clickedTime = Date.now();
reactionTime = (clickedTime - createdTime) / 1000;
document.querySelector('output').textContent = 'Deine Reaktion beträgt:' + reactionTime + 'sec';
this.style.display = 'none';
makeButton();
}
function rand (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
makeButton();
In der Funktion makeButton wird der Button mittels setTimeout um bis zu 3sec verzögert eingeblendet. Die genaue Dauer von time, sowie die Werte für top und left werden mit der Helferfunktion rand() ermittelt. Am Ende der Funktion wird die Zeit der Erstellung mit Date.now ermittelt und der Variable createdTime zugewiesen.
Die Funktion evaluateResponse() wird aufgerufen, sobald auf den Button geklickt wird. Der aktuelle Zeitpunkt wird wieder ermittelt und der Variablen clickedTime zugewiesen. Die reactionTime ist die Differenz, die durch 1000 geteilt wird, um anstelle der in JavaScript verwendeten Millisekunden eine Ausgabe von Sekunden zu erreichen. Danach wird der Button ausgeblendet und erneut die Funktion makeButton aufgerufen.
Fazit
Mit Date.now() können Sie messen und vergleichen. Timestamps mit einer kleineren Auflösung als Millisekunden, um z. B. die Seitenperformance messen zu können, sind damit allerdings nicht möglich.
Hier eignet sich window.performance.now() .
Weblinks
- ECMAScript: date.now
- MDN: Global_Objects/Date/now
