JavaScript clearInterval Methode

Die Methode clearInterval des Window-Objekts wird dazu verwendet, eine zuvor mit Hilfe von setInterval eingeleitete Intervallverarbeitung zu beenden. Meistens sollen solche Intervall-Aufrufe so lange laufen, bis die Seite verlassen wird. Aber in manchen Fällen ist eine solche Endlosschleife nicht erwünscht. In solchen Situationen bedient man sich dann der Methode clearInterval um diese zeitgesteuerte Verarbeitung zu beenden. Als Parameter erwartet die Methode die ID des zuvor gestarteten Verarbeitungsprozesses, welche durch die Methode setInterval beim Start der zeitgesteuerten Verarbeitung zurück geliefert wird.

JavaScript clearInterval Beispiel 1: Ein einfacher Zähler

Im folgenden wird die Nutzung der Methode clearInterval anhand der Implementation eines einfachen Zählers demonstriert (Beachten Sie in diesem Zusammenhang auch unseren JavaScript Countdown Timer, bei dem ein Countdown zu einem angegebenen Termin angezeigt wird). Der Zähler soll im Sekundentakt, beginnend bei 10, bis auf 0 herunterzählen. Zusätzlich soll der Zähler neu gestartet (reset - der Zähler beginnt erneut bei 10), gestoppt und der Zählvorgang fortgesetzt werden können. Die Steuerung kann mit Hilfe von Links erfolgen, welche die entsprechenden Funktionen bereit stellen, damit eine Nutzerinteraktion ermöglicht wird. Bei jeder Änderung des Zählerstandes wird dieser angezeigt. Auch der Status des Zählers wird bei dessen Ablauf, sowie bei Interaktion durch den Benutzer ausgegeben.

Zunächst werden im unten stehenden Script die Links zur Nutzerinteraktion definiert. Die drei Links rufen beim Anklicken die entsprechenden Funktionen auf, die den Eingriff in den Ablauf des Zählers durchführen. Dies sind die Aktionen „neu starten”, „stoppen” und „fortsetzen”. Danach werden die HTML-Elemente zur Ausgabe des Zählerstandes und des Zählerstatus (mit der ID counter bzw. status) definiert, in denen später die entsprechenden Informationen ausgegeben werden.

Die Funktion resetCounter() setzt den Zähler in den Start-Zustand zurück. Dazu wird erst einmal ein zu diesem Zeitpunkt eventuell noch laufender Zähl-Prozess mit der Methode clearInterval abgebrochen. Läuft der Zähler zum Zeitpunkt des Aufrufs der Funktion nicht (wenn der Zähler bereits abgelaufen ist oder zuvor beendet wurde), so passiert nichts. Jetzt wird der Zähler wieder auf den Startwert 10 gesetzt und danach beginnt er – durch den setInterval-Aufruf – den Zählvorgang, der durch die Funktion updateCounter() realisiert ist und im Sekundentakt ausgeführt wird. Am Ende der Funktion wird im HTML-Element mit der ID – dieses Element wird durch die Methode getElementById(), einer Methode aus dem Document-Objekt, ermittelt – status der neue Status des Zählers („zurückgesetzt”) ausgegeben.

Mit der darauf folgenden Funktion stopCounter() wird der Counter angehalten, wenn er nicht schon abgelaufen ist. Über den Aufruf der Methode clearInterval wird der eventuell noch laufende Zähler angehalten. Ist der Counter zuvor bereits gestoppt worden oder schon abgelaufen, so bewirkt auch dieser Aufruf nichts. Auch hier wird dann der neue Status „angehalten” im HTML-Element für die Statusanzeige ausgegeben.

Als nächstes wird die Funktion resumeCounter() definiert. Diese Funktion nimmt den Zählvorgang wieder auf, nachdem er vom Benutzer gestoppt wurde. Ist der Zähler bereits abgelaufen, so wird die Funktion unverrichteter Dinge beendet. Zunächst wird aber mit clearInterval ein evtl. schon laufender Zählvorgang gestoppt, damit der Zähler – durch Aufruf von setInterval – nicht mehrfach gestartet werden kann. Danach wird der Zählvorgang durch Aufruf von setInterval beim aktuellen Zählerstand fortgesetzt und der neue Status „fortgesetzt” – dieses String wird im Beispiel direkt zugewiesen – in der Statusanzeige ausgegeben.

Nun folgt die Funktion updateCounter(), die das Zählen, sowie die Ausgabe des Zählerstandes übernimmt. Sie wird durch einen gestarteten Intervall einmal pro Sekunde ausgeführt und zählt somit im Sekundentakt den Zähler herunter. Damit der Zählerstand und der Zählerstatus in den Ausgabeelementen (Span-Elemente mit den IDs counter und status) ausgegeben werden kann, muss unter diesen HTML-Elementen ein Textknoten existieren. Dies wird als erstes überprüft und es werden Textknoten angehängt, falls noch keine existieren.

Später wird der zuvor gestartete Intervall mit clearInterval beendet (damit die Funktion in Zukunft nicht mehr aufgerufen wird) und der neue Status „abgelaufen” ausgegeben, wenn der Zähler bereits bei 0 angelangt ist. Ist der Counter zum aktuellen Zeitpunkt noch nicht abgelaufen (Zählervariable zaehler != 0), so wird der Status „läuft” ausgegeben. Am Ende der Funktion wird der Zählerstand im Ausgabefeld ausgegeben und danach um eins verringert.

Der letzte Abschnitt des Script-Codes definiert die Zähler-Variable zähler, in welcher der jeweils aktuelle Zählerstand gespeichert wird. Die Variable ca speichert die jeweils von setInterval zurückgelieferte ID des gestarteten Intervalls. Mit Hilfe dieser ID kann der Intervall später durch Aufruf der Methode clearInterval wieder beendet werden. Dies ist in diesem Beispiel nötig, da der Counter bei Erreichen des Zählerstandes 0 abbrechen soll (anderenfalls würde der Counter in einer Endlosschleife immer weiter zählen). Zum Schluß wird noch der Counter gestartet – mit dem Zählen wird direkt nach dem Laden der Seite begonnen.

<!-- Links zur Steuerung des Counters -->
<a href="javascript:resetCounter ()">Counter neu starten</a>
<a href="javascript:stopCounter ()">Counter stoppen</a>
<a href="javascript:resumeCounter ()">Counter fortsetzen</a><br>
<!-- Ausgabebereich für den Counter definieren
     In diesen HTML-Elementen soll später der Zähler
     und dessen Status ausgegeben werden -->
Zählerstand: <span id="counter"></span><br>
Status: <span id="status"></span>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Counter zurücksetzen
  function resetCounter () {
    // erst mal evtl. noch laufenden Counter anhalten
    window.clearInterval (ca);
    // wieder bei 10 anfangen
    zaehler = 10;
    // Counter mit neuem Anfangswert starten
    ca = window.setInterval ('updateCounter ()', 1000);
    // Status ausgeben
    document.getElementById ('status').firstChild.data = 'zurueckgesetzt';
  }

  // Funktion zum Anhalten des Counters, wobei der Zählerstand
  // erhalten bleibt
  function stopCounter () {
    // nur anhalten, wenn nicht schon abgelaufen
    if (zaehler > 0) {
      // Counter anhalten (Intervall abbrechen)
      window.clearInterval (ca);
      // Status ausgeben
      document.getElementById ('status').firstChild.data = 'angehalten';
    }
  }

  // Funktion zum Fortsetzen des Counters, nachdem er angehalten wurde
  function resumeCounter () {
    // nur fortsetzen, wenn nicht schon abgelaufen
    if (zaehler > 0) {
      // erst mal evtl. noch laufenden Counter anhalten
      window.clearInterval (ca);
      // im Sekundentakt weiterzählen
      ca = window.setInterval ('updateCounter ()', 1000);
      // neuen Status setzen
      document.getElementById ('status').firstChild.data = 'fortgesetzt';
    }
  }

  // Funktion zur Ausgabe des Zählerstandes auf HTML-Element mit der
  // ID 'counter' definieren
  function updateCounter () {
    // Ausgabeelement für die Ausgabe über dessen Element-ID ermitteln
    // hängt schon ein Textknoten unter dem Ausgabeelement?
    if (!document.getElementById ("counter").firstChild)
      // wenn nicht, dann Textknoten an Ausgabeelement hängen,
      // da die Ausgabe nur in einem Textknoten erfolgen kann
      document.getElementById ("counter").appendChild (document.createTextNode (""));
    // gleiches muss mit dem Statusfeld geschehen
    if (!document.getElementById ("status").firstChild)
        document.getElementById ("status").appendChild (document.createTextNode (""));
    // Zähler noch nicht bei 0 angekommen?
    if (zaehler >= 0) {
      // Status aktualisieren
      if (zaehler == 0) {
        // Counter abgelaufen => laufenden Intervall beenden
        window.clearInterval (ca);
        // und Status aktualisieren
        document.getElementById ("status").firstChild.data = 'abgelaufen';
      }
      else
        // Counter läuft noch
        document.getElementById ("status").firstChild.data = 'laeuft';
      // Counter ausgeben und danach runterzählen
      document.getElementById ("counter").firstChild.data = zaehler--;
    }
  }

  // Zähler initialisieren
  var zaehler = 10;
  // Variable zur Speicherung der ID eines laufenden Intervalls
  // Ist nötig, um einen durch setInterval gestarteten
  // Intervall später wieder abbrechen zu können.
  var ca;
  // Funktion zur Ausgabe der Uhrzeit soll einmal pro Sekunde
  // aufgerufen werden
  ca = window.setInterval ("updateCounter ()", 1000);
// -->
</script>

Counter neu starten Counter stoppen Counter fortsetzen
Zählerstand:
Status:

weiter zu Seite 2 3 4 »