Timer

1. Wofür benötigen wir Timer?

Ergänzen Sie die folgenden Beispiele um weitere, die Ihnen einfallen ...
  1. Uhrzeit jede Sekunde aktuell ausgeben
  2. Maximale Restzeit eines Spiels festlegen (Ratespiel, Fangspiel, Rechenspiel, ...)
  3. Eieruhr klingelt nach Zeit x
  4. Stoppuhr
  5. ...

2. Timer-Arten

Es gibt verschiedene Arten von Timern.
  1. Interval Timer:
    Interval-Timer sorgen z.B. dafür, dass eine Aktion (z.B. Funktion) in regelmäßigen Abständen aufgerufen wird.
  2. Timeout:
    Dieser Timer läuft nach einer vorgegebenen Zeit ab.

Aufgabe: Ordnen Sie die genannten Anwendungen aus Kapitel 1 den genannten Timer-Arten zu!

Hinweis: Um einmalig die aktuelle Zeit auszugeben, benötigt man keinen Timer, sondern ein Date-Objekt, siehe ...

3. Benutzung

1) Starten und Stoppen eines einfachen Timers (für einmalig auftretende Ereignisse)

Nach Ablauf einer Zeit t wird einmalig eine Aktion ausgeführt, im folgenden Beispiel wird nach 3000 Millisekunden die Funktion machwas() einmalig ausgeführt:
var timerID = setTimeout("machwas()",3000);
Wenn man die Ausführung der Funktion in 3000 Millisekunden verhindern will, so muss man den Timer vor Ablauf dieser Zeit stoppen. Der Rückgabewert der Funktion setTimeout() ist die ID des gestarteten Timers und wird in der Variable timerID gespeichert, siehe obiges Beispiel.
Wenn jetzt also der Fall "Stop" auftritt - z.B. klicken auf einen Button - dann muss der folgende Befehl für das Stoppen des Timers verwendet werden:
clearTimeout(timerID);
Die Funktion machwas() wird nach Aufruf von clearTimeout dann nicht mehr ausgeführt. Sie können dann natürlich sofort wieder einen neuen Timer starten.

2) Starten eines Interval-Timers (für zyklisch auftretende Ereignisse)

Ein Timer wird z.B. wie folgt realisiert. Alle 40 Millisekunden wird in folgendem Beispiel die Funktion meineFunktion() aufgerufen:
var IntervalId = setInterval('meineFunktion()', 40);
Alternativ kann die Funktion auch einfach wie folgt eingefügt werden:
var IntervalId = setInterval(meineFunktion, 40);
Wozu die Variable IntervalId verwendet wird, erfahren Sie im nächsten Kapitel.

3) Stoppen des Interval-Timers

Ein Timer sollte auch wieder korrekt gestoppt werden, z.B. im Falle eines Resets oder beim Verlassen der Seite usw.. Das geht wie folgt:
  • Es wird eine Variable benötigt, in welcher der Identifier des Timers gespeichert werden kann. Diese Variable wird einfach global im Programm angelegt (nach dem ersten <script ...>, z.B. var IntervalId).
  • Die Funktion setInterval() gibt die ID des gestarteten Timers zurück. Hierzu muss man den Aufruf dann also wie folgt schreiben IntervalId = setInterval( ...). In der Variablen IntervalId wird so die ID des Timers gespeichert.
  • Wenn man den Timer stoppen möchte, reicht dann anschliessend der Aufruf von:
clearInterval(IntervalId);
 

4) Beispielprogramm "Zaehlen"

...
    var IntervalId;
    var zahl=1;
    var letzteZahl=10;
 
    function zaehlen()
    {
      if(zahl > letzteZahl)
      {
        // Das Programm ist hier zuende
        clearInterval(IntervalId);
      }
      document.getElementById("ausgabe").innerHTML += zahl + " ";
      zahl++;
    }
...
<body onload="IntervalId=setInterval(zaehlen,500)">
 
  <h1>Zählen</h1>
  <div id="ausgabe"></div>
...
 

5) Beispielprogramm "Countdown"

...
    var identifier;
    var seconds=60;
 
    function count()
    {
        document.getElementById("ZaehlerId").innerHTML=seconds;
        seconds--;
    }
...
 
<body onload="identifier=setInterval('count()',1000);">
 
  <div id="ZaehlerId"></div>
 
  <input type="button" onclick="clearInterval(identifier)" value="Stop">
 
...
 
 

6) Sonstiges

Manchmal finden Sie auch den Befehl window.setTimeout(). Wo ist der Unterschied zu setTimeout? Siehe: