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.

Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht