Wiederholende Ausführungen setzen - setInterval()

Die lange Schreibweise von setInterval ist window.setInterval( Funktion, Millisekunden);. Es gehört also zu unserem Bereich der „window“-Browserobjekte. Allerdings ist die Angabe von „window.“ nicht notwendig und es wird in der Praxis i.d.R. nur in der Kurzform geschrieben.

Mit setInterval() erhalten wir in JavaScript die Möglichkeit, wiederholende Ausführungen in einem einstellbaren Zeitintervall zu aktivieren. Hier kommt auch die Besonderheit von JavaScript zum Vorschein. Nach dem Programmstart wird die Wiederholung solange durchgeführt, bis entweder diese durch das Gegenstück clearInterval() aufgehoben wird oder das Browserfenster geschlossen wird. Wir haben also im Gegensatz zu Beispielsweise PHP ein immer weiterlaufendes Programmcode!

Zeigen wir das gleich an einem Beispiel – eine Zahl soll im Sekundentakt hochgezählt werden.

Der Methode setInterval() werden mindestens 2 Parameter mitübergebe:

setInterval(Funktion, Millisekunden)

Es können noch weitere Parameter übergeben werden, was für den Einstieg noch nicht relevant ist (zumal der IE9 und früher die nicht unterstützen).

setInterval(Funktion, Millisekunden, Parameter1, Parameter2, ...)

Erstellen wir nun unser Beispiel, das im Sekundentakt hochzählt:

let vergangenezeit = 1;
function sekundenanzeige() {
	document.write(vergangenezeit + "<br>");
	vergangenezeit++;
}
setInterval(sekundenanzeige, 1000);

Wir definieren als erstes eine Variable mit dem Namen vergangenezeit und weisen dieser die Zahl „1“ zu.

Jetzt können wir die Funktion definieren, die im gewünschten Intervall ausgeführt wird. Diese bekommt den Namen sekundenanzeige. Innerhalb dieser Funktion lassen wir auf dem Bildschirm den aktuellen Inhalt unserer Variablen vergangenezeit ausgeben und addieren 1 dazu.

Jetzt setzen wir das Intervall, mit dem unsere Funktion aufgerufen wird über setInterval. In der runden Klammer kommt als erstes die aufzurufende Funktion – in unserem Fall sekundenanzeige und danach getrennt mit einem Komma die Intervallzeit in Millisekunden. Da wir jede Sekunde einen Aufruf wünschen, müssen wir 1000 Millisekunden angeben.

anonyme Funktion – kürzer ist schöner

Das Ganze kann man kürzer programmieren und ohne eine weitere Funktion. In unserem obigen Beispiel haben wir eine Funktion mit dem Namen sekundenanzeige erstellt. Wir wollen uns es sparen, uns einen Namen für die Funktion zu überlegen – wir wollen eine sogenannten anonyme Funktion dafür nutzen. Dazu werfen wir einfach den aufrufenden Funktionsnamen raus und packen den Inhalt der Funktion dort hinein.

Hier der typische Vorher-Nachher-Code:

Vorher:

let vergangenezeit = 1;
function sekundenanzeige() {
	document.write(vergangenezeit + "<br>");
	vergangenezeit++;
}
setInterval(
sekundenanzeige
, 1000
);

Nachher mit anonymer Funktion:

let vergangenezeit = 1;
setInterval(
function() {
	document.write(vergangenezeit + "<br>");
	vergangenezeit++;
}
  	, 1000
   );

Das Intervall auch wieder stoppen – clearInterval

Wir wollen das von uns gesetzt Intervall auch wieder stoppen können. Dazu ist es notwendig, dass wir es ansprechen können. Daher ist es wichtig, dass der Aufruf von setInterval über eine Zuweisung zu einem Namen erfolgt:

let sekundenzaehler = setInterval(sekundenanzeige, 1000);

Und anhand dieses Namens (was genaugenommen eine ID ist) können wir den „Intervallaufruf“ auch wieder stoppen über:

clearInterval(sekundenzaehler);

Unser Beispiel ergänzen wir – in unserer Ausgabe überprüfen wir, ob der Aufruf bereits 10-mal erfolgt ist und dann stoppen wir den Intervallaufruf:

let vergangenezeit = 1;
let sekundenzaehler = setInterval(sekundenanzeige, 1000);
function sekundenanzeige() {
	document.write(vergangenezeit + "<br>");
	vergangenezeit++;
	if ( vergangenezeit > 10 ) {
		clearInterval(sekundenzaehler);
	}
}

Beispiel Uhrzeit ausgeben

Eine typische Anwendung ist, die Uhrzeit auszugeben.

let uhrzeitanzeige = setInterval(uhrzeitausgabe, 1000);
function uhrzeitausgabe() {
  let zeitpunkt = new Date();
  let uhrzeit = zeitpunkt.toLocaleTimeString();
  document.write(uhrzeit + "<br>");
}

Wollen wir nun in HTML diese gezielt an einem bestimmten „Fleck“ ausgeben, nutzen wir ein DIV mit Bezeichnung „anzeigeuhrzeit“ und lassen diese durch JavaScript dort jede Sekunde austauschen.

<div id="anzeigeuhrzeit">hier Uhrzeit anzeigen</div>

Und unser entsprechendes JavaScript-Programm um die Uhrzeit anzuzeigen:

<script>
window.addEventListener("load", function() {
	let uhrzeitanzeige = setInterval(uhrzeitausgabe, 1000);
	function uhrzeitausgabe() {
	  let zeitpunkt = new Date();
	  let uhrzeit = zeitpunkt.toLocaleTimeString();
	  document.getElementById("anzeigeuhrzeit").innerHTML = uhrzeit;
	}
} );
</script>

Spieleprogrammierung – eine typische Anwendung für setInterval

Besonders bei er Programmierung bei Spielen ist der Faktor Zeit eine typische Komponente. Ein Level ist z.B. in einer vorbestimmten Zeitspanne zu lösen.

Bitte als Übungsaufgabe folgende Aufgabe:

  • es soll ein Sekundenanzeige eingeblendet werden, die von 30 im Sekundentakt abwärts auf 0 zählt
  • bei Erreichen der 0 soll das Abwärtszählen gestoppt werden und eine Einblendung erfolgen mit „Game over“

Viel Spaß beim Umsetzen.

weitere eigene Projekte: