JavaScript setInterval Methode

Die Methode setInterval gehört zum Window-Objekt. Mit ihrer Hilfe können JavaScript-Anweisungen automatisch in vorgegebenen Zeitintervallen ausgeführt werden. Dies geschieht so lange, bis diese zeitgesteuerte Verarbeitung mit Hilfe der Methode clearInterval beendet wird – geschieht dies nicht, so läuft die Verarbeitung endlos weiter. SetInterval erwartet zwei Parameter: Zum einen die Anweisung oder Funktion, die zeitgesteuert ausgeführt werden soll, und zum anderen den Zeitintervall (in Millisekunden) der zwischen zwei Aufrufen verstreichen soll. Der Erste Aufruf erfolgt stets nach Ablauf des angegebenen Intervalls. Als Rückgabewert wird eine ID geliefert, mit deren Hilfe die Intervallausführung später wieder beendet werden kann.

JavaScript setInterval Beispiel 1: Eine einfache Dia-Show

Im folgenden Beispiel wird eine einfache Dia-Show realisiert. Es werden im Abstand von jeweils drei Sekunden Fotos angezeigt. Dargestellt werden die Bilder im IMG-Element mit der ID bild, welches im Script-Code unten zunächst definiert wird. Die im Code darauf folgende Funktion updatePicture() übernimmt die Zuweisung des Bildes mit dem aktuell gültigen Index zum Ausgabeelement bild. Nachdem das entsprechende Bild der src-Eigenschaft des Ausgabeelements zugewiesen wurde, kann der Bildindex auf des nächste Bild gesetzt. Beim nächsten Durchgang (nach Ablauf eines Zeitintervalls von drei Sekunden) wird dann das Bild mit dem neu gesetzten Index angezeigt.

Das nun folgende Array wird mit den URLs der in der Dia-Show darzustellenden Bilder gefüllt. Vor dem ersten Aufruf wird der Bildindex auf 0 gesetzt was dazu führt, dass das erste Bild der Bilderliste (alberobello_k.jpg) beim nächsten Aufruf der Funktion updatePicture () angezeigt wird. Dies wird dann auch direkt durch den Aufruf der Funktion updatePicture() erledigt, da sonst drei Sekunden kein Bild angezeigt werden würde (die Funktion wird ja erst nach Ablauf des Intervalls zum ersten Mal automatisiert ausgeführt). Am Ende des Scripts wird mit der Methode setInterval dafür gesorgt, dass in einem zeitlichen Abstand von jeweils 3 Sekunden (3000 Millisekunden) die Funktion updatePicture() immer wieder aufgerufen wird.

Achtung: In der Demonstration auf dieser Seite wird das Timeout maximal 20 mal ausgeführt. Danach bleibt die Dia-Show auf dem zuletzt angezeigten Bild stehen. Das im Codefenster unten angezeigte Script läuft dagegen endlos weiter.

<!-- Ausgabebereich für die Bilder definieren
     In diesem IMG-Element sollen die Bilder ausgegeben werden -->
<img id="bild" src="" alt="">
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
  // Funktion zur Ausgabe der Bilder auf IMG-Element mit der ID 'bild'
  function updatePicture () {
    // Bild des aktuellen Bildindex im IMG-Element anzeigen
    document.getElementById ('bild').src = bilder[aktueller_bildindex];
    // Bildindex für den nächsten Durchgang festlegen
    if (aktueller_bildindex == bilder.length - 1)
        aktueller_bildindex = 0;
    else
        aktueller_bildindex++;
  }

  // Bilderliste definieren
  var bilder = new Array ('/photos/alberobello_k.jpg',
                          '/photos/boot_k.jpg',
                          '/photos/burano5_k.jpg',
                          '/photos/silberfisch_k.jpg');
  // mit erstem Bild (Index = 0) starten
  var aktueller_bildindex = 0;
  // Erstes Bild direkt anzeigen
  updatePicture ();

  // Bilder mit einer Verzögerung von 3 Sekunden aktualisieren
  window.setInterval ("updatePicture ()", 3000);
// -->
</script>

Die Fotos stammen von der Verfasserin der Internetseite www.KunstundReisen.de. Sollten Ihnen die Fotos gefallen und Sie sich für Italien – insbesondere Sizilien und Umgebung – interessieren, so kann ich diese Seite aufgrund der Fülle an gelieferten Information nur empfehlen.

Weitere Fotos finden Sie auch in den Galerie-Demonstrationen unter JavaScript Bildergalerie bzw. PHP Galerie. Die Sourcen dieser Beispiele können Sie unter JavaScript Bildergalerie bzw. PHP Bildergalerie.

weiter zu Seite 2 3 4 »