JavaScript setInterval Parameter Beispiel 4: Ein Ticker zur Ausgabe von Meldungen

Im nächsten Beispiel zur setInterval-Mathode soll ein kleiner Textticker umgesetzt werden, der eine in einem Span-Element gespeicherte Meldung Zeichen für Zeichen in diesem HTML-Elementobjekt ausgibt. Der untere Kasten, in dem das Script dargestellt wird, implementiert die Funktion zeilenticker. Diese Funktion übernimmt die zur Darstellung des Tickers nötigen Schritt.

Am Anfang der Funktion wird – nachdem sichergestellt wurde, dass die Verarbeitung des Intervalls nicht bereits gestartet wurde –, eine Variable mit dem Namen tickertext mit dem Inhalt des Ausgabefeldes gefüllt. Die vorherige Prüfung ist wichtig, da ein Intervall nicht mehr gestoppt werden kann, wenn die in der Variable tickerinterval gespeicherte Intervall-ID nicht mehr nachvollziehbar ist (sie würde durch einen weiteren Aufruf von setIntervall – während ein anderer Intervall noch läuft – durch das Script überschrieben werden). Den Tickertext, welcher in Form eines Strings in tickertext abgelegt wird, benötigt die Funktion, da die Zeichen bei jedem Aufruf der Funktion den Inhalt des Span-Elements überschreibt. Durch den getElementById-Konstrukt wird der Text aus dem Element über das HTML-Elementobjekt ermittelt.

Nachdem die Daten quasi zwischengespeichert wurden wird mit der Variablen pos die Position des letzten im aktuellen Aufruf auszugebenen Zeichens gesetzt. Jetzt bedient sich das Script der Methode setInterval um die Verarbeitung des Intervalls einzuleiten (nach Ablauf der im zweiten setInterval Parameter angegebenen Zeitspanne wird die Funktion erneut aufgerufen. Die der Methode setInterval übergebenen Parameter geben auch hier wieder die aufzurufende Funktion – nämlich zeilenticker – und den Intervall (im Script sind 100ms angegeben), nach dessen Versteichung die Aufrufe der Funktion erfolgen sollen, an.

Beim ersten, wie auch bei jedem weiteren Aufruf der Funktion wird mittels der Methode getElementById (s. auch DOM (Document Object Model)) die zwischengespeicherte Zeichenkette vom ersten (Indexposition 0) bis zu dem in der Variable pos angegebenen Zeichen im Span-Element ausgegeben. Mit der Methode getElementById wird wieder das anzusprechende HTML-Elementobjekt für diese Operation über das Objekt Document ermittelt. Das Teilstring des jeweiligen Aufrufs wird mit der Methode substr des String-Objekts extrahiert – Substr liefert alle im String enthaltenen Zeichen von der ersten bis zur zweiten der Methode als Parameter angegebenen Indexposition.

Als letzte Anweisung vor Ende der Funktion bedient sich diese wieder der Methode clearInterval, welche die Intervallverarbeitung abbricht, damit keine weiteren und unnötigen Funktionsaufrufe mehr erfolgen. Ausgeführt wird diese Anweisung aber erst dann, wenn alle Zeichen des Tickers im Ausgabelement ausgegeben wurden, was über die davor notierte If-Anweisung nachgeprüft wird. SetInterval und clearInterval gehören gleichermaßen dem unter JavaScript vordefinierten Objekt Window an. Die Funktion wird im Kasten unterhalb des Scripts demonstriert. Klicken Sie dort einfach mit der Maus auf den Link „Ticker starten”. Zur Integration des Scripts in Ihre Seite lesen Sie bitte den Artikel JavaScript Source Code einbinden.

<span id="zeilenticker" style="width:20em;">Hier kann die Textmeldung des Tickers stehen!</span><br>
<a href="javascript:zeilenticker()" title="">Ticker starten</a>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion zur Darstellung eines Texttickers
function zeilenticker () {
  // Ticker noch nicht aufgerufen?
  if (typeof tickertext == 'undefined' ¦¦ tickertext.length == 0) {
    // Tickertext in Variable zwischenspeichern
    tickertext = document.getElementById ('zeilenticker').firstChild.data;
    // Enthält die Variable überhaupt Text?
    if (tickertext.length > 0) {
      // Wir beginnen mit dem ersten Zeichen des Strings...
      pos = 0;
      // und starten den Intervall
      tickerinterval = window.setInterval ('zeilenticker()', 100);
    }
  }
  // Bei jedem Aufruf wird ein Zeichen mehr angezeigt
  document.getElementById ('zeilenticker').firstChild.data = tickertext.substr (0, pos++);
  // Wird bereits das vollständige String angezeigt?
  if (pos - 1 == tickertext.length)
    // Dann müssen wird der Intervall beenden, damit die Funktion
    // unnötigerweise nicht weiter aufgerufen wird.
    window.clearInterval (tickerinterval);
}
// -->
</script>

Hier kann die Textmeldung des Tickers stehen!
Ticker starten

« zurück zu Seite 1 2 3