Quelltext der Seite JavaScript/Tutorials/Timer und Countdown

{{Text-Info|20min|mittel|
* [[JavaScript und das DOM]]
* [[JavaScript/Tutorials/Zeit & Datum|Zeit & Datum]]}}
Hast du jemals einen Countdown-Timer für ein Projekt benötigt? Eine Suche im Netz findet viele Bibliotheken - eine Lösung mit [[Vanilla-JS]] ist aber gar nicht so schwierig.

In diesem Tutorial lernst Du, wie man einen Timer baut, der die Zeit hoch- oder bei einem Countdown herunterzählt. Dabei verwenden wir neben JavaScript HTML, SVG und gestalten alles mit CSS. Deshalb solltest Du bereits Grundkenntnisse in diesen Technologien vorweisen können.

{{Info|Dies ist eine umfassende Neubearbeitung des [[Museum/Selfhtml-aktuell|SELFHTML-aktuell]]-Artikels '''[https://web.archive.org/web/20100724122607/http://aktuell.de.selfhtml.org/artikel/javascript/timer/ Komfortable Timer-Funktion'''] - ein Helferscript zum wiederholten Ausführen von Funktionen.<ref>Dies ist eine umfassende Neubearbeitung des [[Museum/Selfhtml-aktuell|SELFHTML-aktuell]]-Artikels '''[https://web.archive.org/web/20100724122607/http://aktuell.de.selfhtml.org/artikel/javascript/timer/ Komfortable Timer-Funktion'''] - ein Helferscript zum wiederholten Ausführen von Funktionen.<br>Das Script wurde im Zusammenhang mit einer [https://forum.selfhtml.org/self/2007/oct/29/script-handler/1174203#m1174203 Forumsdiskussion] von Struppi entwickelt und von Mathias Schäfer dokumentiert.<br>2009 wurde mit ES5 [[JavaScript/Objekte/Date/now#Timer|Date.now()]] eingeführt, das unser Timer-Script radikal vereinfacht.</ref><br>2009 wurde mit ES5 [[JavaScript/Objekte/Date/now#Timer|Date.now()]] eingeführt, das unser Timer-Script radikal vereinfacht.}}

== Vorüberlegungen ==

JavaScript-Programme sind nicht mit anderen Computerprogrammen zu vergleichen, die eine bestimmten Startzeit und Endzeit ihrer Ausführung haben. JavaScripte werden immer wieder für kurze Zeit aktiv, etwa wenn auf Ereignisse reagiert wird. Wenn ein JavaScript tatsächlich mehrere Sekunden an einem Stück läuft und die gesamten Rechenkapazitäten in Beschlag nimmt, friert der Browser ein oder zeigt einen Dialog, mit dem das Script abgebrochen werden kann.

Dementsprechend gibt es in JavaScript keinen Befehl <code>sleep</code>, der einfach für eine gegebene Zeit nichts tut. So etwas ist in JavaScript nicht möglich. Allerdings lassen sich über [[JavaScript/Window/setTimeout|window.setTimeout]] und [[JavaScript/Window/setInterval|window.setInterval]] Funktionen nach einer angegebenen Wartezeit aufrufen.

Soll ein Script über längere Zeit laufen und zwischen einzelnen Befehlen eine Wartezeit verstreichen lassen, ist dies in JavaScript nur mit [[JavaScript/Window/setTimeout|window.setTimeout]] über das »Stop & Go«-Verfahren möglich. Auf diese Weise können z.B. Animationen umgesetzt werden.

Ein verzögerter Aufruf sieht in manch anderen Sprachen schematisch so aus:
{{Beispiel|
{{BeispielCode|<syntaxhighlight lang="javascript">
befehl1;
sleep(5);
befehl2;
</syntaxhighlight>}}
}}

In JavaScript hingegen notieren wir eine Funktion, die wir zeitverzögert aufrufen:
{{Beispiel|
{{BeispielCode|<syntaxhighlight lang="javascript">

befehl1;
function befehl2 () {}
window.setTimeout(befehl2, 5000);
</syntaxhighlight>}}
}}

Knifflig wird es nun, wenn ein Befehl mit sich ändernden Parametern mehrmals ausgeführt werden soll und dazwischen jeweils eine Zeitspanne liegen soll. Ein Countdown etwa ließe sich in anderen Sprachen schematisch so realisieren:

{{Beispiel|
{{BeispielCode|<syntaxhighlight lang="javascript">
for ($i = 10; $i > 0; i--) {
  echo $i . "\n";
  sleep(1);
}
</syntaxhighlight>}}
}}

In JavaScript wird dies üblicherweise mit einer Funktion gelöst, die sich immer wieder selbst verzögert aufruft und dabei den Schleifenzähler übergibt:
{{Beispiel|
{{BeispielCode|<syntaxhighlight lang="javascript">
function countdown (i) {
  if (i == undefined) {
    // Startwert
    i = 10;
  }
  alert(i);
  if (i > 0) {
    i--;
    // Funktion verzögert aufrufen
    var timeout = window.setTimeout('countdown(' + i + ')', 1000);
  }
}
// Countdown anstoßen
countdown();
</syntaxhighlight>}}
}}

Wir sehen hier bereits, wie kompliziert die Umsetzung eines einfachen Countdowns wird. Diese verbreitete Umsetzung lässt sich zunächst durch den Einsatz von [[Closure]]s vereinfachen. Damit lässt sich die Übergabe von Parametern einfacher gestalten: Anstatt <code>window.setTimeout("countdown(" + i + ")", 1000);</code> können wir ebenso eine [[anonyme Funktion]] notieren, die als Closure wirkt und in der die lokale Variable <code> i </code> zur Verfügung steht: <code>window.setTimeout(function () { countdown(i) }, 1000);</code>. Dies ist vor allem sinnvoll, wenn mehr und komplexere Variablen übergeben werden müssen, die nicht so einfach in einen String linearisiert werden können.

Wenn mehrere Funktionen periodisch aufgerufen werden sollen, so ist es umständlich, denselben Mechanismus immer wieder neu zu notieren. Im Folgenden wird eine Helferfunktion vorgestellt, mit der sich solche Aufgaben komfortabel umsetzen lassen.


== Vorstellung der Timer-Methode ==
=== Timer mit Date.now() ===
Die Methode [[JavaScript/Window/setInterval|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 [[JavaScript/Objekte/Date/now|date.now()]] kannst du einen solchen Timer problemlos takten:
 
{{Beispiel|titel=Jetzt geht's los!|zeige=Beispiel:JS-Date-now-1.html|
{{BeispielCode|<syntaxhighlight lang="javascript">
  function timer() {
    const startTime = Date.now();

    let interval = setInterval(function() {
       let elapsedTime = Date.now() - startTime;
       document.getElementById('timer').textContent = (elapsedTime / 1000).toFixed(1);
    }, 100);
  }
</syntaxhighlight>}}}}
In dieser <code>timer</code>-Funktion wird anfangs ein Startzeitpunkt mit <code>Date.now()</code> festgelegt und der Variablen <code>startTime</code> zugewiesen.

Mit [[JavaScript/Window/setInterval|setInterval]] wird nun in einer [[Anonyme Funktion#Anonyme Funktionen|anynomen Funktion]] der aktuelle Zeitpunkt ermittelt und um den Startzeitpunkt vermindert.

Diese <code>elapsedTime</code> wird bei der Ausgabe entsprechend formatiert: 
# mit einer Division durch 1000 erhält man die Sekunden, 
# mit [[JavaScript/Objekte/Number/toFixed|toFixed]] wird die Anzahl Nachkommastellen passend abgeschnitten, sodass nur Zehntelsekunden sichtbar sind.

=== Countdown - rückwärts zählen ===
Natürlich kann man mit JavaScript auch rückwärts zählen:

<syntaxhighlight lang="javascript">
const count = 15;
const timer = setInterval(function() {
  count--;
  console.log(count);
  if (count === 0) {
    clearInterval(timer);
    console.log("Countdown finished!");
  }
}, 1000);</syntaxhighlight>

In seiner einfachsten Variante verzichten wir auf das Date-Objekt und überlassen das Zählen der [[JavaScript/WindowOrWorkerGlobalScope/setInterval|setInterval()]]-Methode, deren zweiter Parameter die Angabe <code>1000</code> (Millisekunden) erhält und die so jede Sekunde die Zählvariable <code>count</code> einmal mit [[JavaScript/Operatoren/Rechenoperatoren#Inkrementoren_und_Dekrementoren|--]] um eins verringert und dann ausgibt.

Wenn <code>count</code> 0 beträgt, wird mit [[clearInterval]] das Intervall gelöscht und eine Meldung ausgegeben.

Als Modifikation unseres ersten Beispiels

{{Beispiel|titel=Der letzte Countdown!|zeige=Beispiel:JS-Timer-2.html|
{{BeispielCode|
<syntaxhighlight lang="javascript">
const duration = 15; 
  
function timer(duration) {
	const startTime = Date.now();
	const targetTime = startTime + (duration * 1000); // Convert seconds to milliseconds

	let interval = setInterval(function() {
		let elapsedTime = targetTime - Date.now();
		if (elapsedTime > 0) {
			document.getElementById('timer').textContent = (elapsedTime / 1000).toFixed(1);
		} else {
			clearInterval(interval);
			document.getElementById('timer').textContent = "0.0";
			console.log("Countdown finished!");            
		}
	}, 100);
}</syntaxhighlight>}}}}

{{ToDo|siehe Forum: [https://forum.selfhtml.org/self/2024/mar/07/count-down-uhr-audiodatei-wird-nicht-abgespielt/1814325#m1814325 SELF-Wiki: Zeit & Datum]

'''Bereits bestehende Seiten:'''
* [[CSS/Custom_properties_(CSS-Variablen)#Countdown]]
* [[JavaScript/WindowOrWorkerGlobalScope/setTimeout#Countdown]] mit Start und Stop

--[[Benutzer:MScharwies|Matthias Scharwies]] ([[Benutzer Diskussion:MScharwies|Diskussion]])}}

=== Visualisierung mit CSS-Animation ===

=== Analog oder digital? ===
Mit SVG kannst du auch das Zifferblatt einer Uhr und Zeiger darstellen:

*https://css-tricks.com/how-to-create-an-animated-countdown-timer-with-html-css-and-javascript/

== Ausführungszeiten messen ==
Wenn du '''Lade- und Laufzeiten von Skripten messen und vergleichen''' willst, reicht das  [[JavaScript/Objekte/Date|Date-Objekt]] von JavaScript nicht aus, da die Systemzeit des Anwenderrechners nicht hinreichend genau ist. Theoretisch misst sie in Millisekunden – praktisch verzögert sich die Ausführung von Skripten durch die ''single-threaded'' Natur von JavaScript. Darüber hinaus wird die Systemzeit alle 15-20 Minuten synchronisiert, sodass es hier zu Sprüngen von mehreren Millisekunden kommen kann.

{{Beispiel|zeige=dummy|titel=früher: Messen mit dem Date-Objekt|
{{BeispielCode|<syntaxhighlight lang="javascript">
var start = new Date();
    // CODE, der gemessen werden soll
var time = new Date() - start;
// time is the number of milliseconds it takes to execute the script
</syntaxhighlight>}}}}

=== High Resolution Time ===
Der [https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp DOMHighResTimeStamp] kann zum Speichern von Zeitwerten verwendet werden. Im Unterschied zum Date-Objekt kann es dabei bis zu 5/1000 einer Millisekunde (5 µs (Microsekunden)) unterscheiden.<ref>W3C: [https://www.w3.org/TR/hr-time/#sec-DOMHighResTimeStamp High Resolution Time]</ref>

=== performance.now() ===
Die Methode <code>window.performance.now</code> ermöglicht ähnlich wie [[JavaScript/Objekte/Date/now|Date.now()]] das Messen und Vergleichen von Zeitpunkten. Dabei bietet es aber ''timestamps'' mit einer kleineren Auflösung als die im Date-Objekt verwendeten Millisekunden, um die Seitenperformance messen zu können.<ref>
MDN: [https://developer.mozilla.org/en-US/docs/Web/API/Performance/now Performance.now()]
* developers.google: [https://developers.google.com/web/updates/2012/08/When-milliseconds-are-not-enough-performance-now When milliseconds are not enough: performance.now ] von Paul Irish
* John Resig: [http://ejohn.org/blog/accuracy-of-javascript-time/ Accuracy of JavaScript Time]</ref>
{{Caniuse|high-resolution-time}}
Grundlage ist nicht der 01.01.1970, sondern die in <code>[https://developer.mozilla.org/en-US/docs/Web/API/PerformanceTiming/navigationStart performance.timing.navigationStart]</code> gespeicherte Zeit, in der die fragliche Seite geladen wurde. 

{{Beispiel|zeige=dummy|titel=heute: Messen mit performance.now()|
{{BeispielCode|<syntaxhighlight lang="javascript">
var start = performance.now();
    // CODE, der gemessen werden soll
var time = performance.now();
console.log('Dauer: ' + (time - start) + ' ms.');
</syntaxhighlight>}}}}

=== Online-Testlabore ===
Ausführungszeiten selbst zu messen ist dann nötig, wenn man eine solche Messung im echten Code braucht. Um die Performance von unterschiedlichen Implementierungen eines Algorithmus zu testen, gibt es Tools, die dabei unterstützen.

Eines davon ist [https://jsperf.app jsperf.app], das die Laufzeit von Codesnippets misst und vergleicht. Es basiert auf [https://benchmarkjs.com benchmark.com], womit Sie auch ihre eigene Benchmark-Suite erstellen können.

Wir möchten damit nicht sagen, dass dieses Tool das einzige oder das beste ist. Es funktioniert, macht keine Werbung und setzt keine Third-Party Cookies (Stand November 2024). Weitere Vorschläge für solche Tools nehmen wir gerne entgegen.

== Siehe auch ==
{{Cards|

  {{Card|titel=Einführung in Zeit & Datum|link=JavaScript/Tutorials/Zeit & Datum|
    {{Card/Bild|Date-Icon.svg}}
  }}
  {{Card|titel=Monatskalender|link=JavaScript/Tutorials/Monatskalender|
    {{Card/Bild|Date-Icon.svg}}
  }}
{{Card|titel=input type="date" und mehr|link=Formulare/input type="date" und mehr|HTML5 bietet eine Vielzahl von neuen Eingabe-Typen für Datums- und Zeitangaben.}}
}}


* [[JavaScript/Objekte/Date/now]]

== Weblinks ==
<references/>

{{Kategorie|JavaScript|Timer}}
[[Kategorie:Tutorial]]
[[Kategorie:Zeit & Datum]]