JavaScript/Window/setInterval

Die Methode Window.setInterval() setzt ein Intervall, das immer wieder ausgeführt wird.

Syntax:

var intervalID = scope.setInterval(func, delay[, param1, param2, ...]);

• Funktion: entweder eine anonyme Funktion oder der Name einer Funktion. Diese wird immer ohne Parameter aufgerufen (alle Parameter enthalten undefined)
• delay: Zeitabstand in Millisekunden zwischen den Funktionsaufrufen.
• intervalID: die Interval-Id (für clearInterval)

Anwendungsbeispiel

Beispiel So sieht's ausQuellcode

document.addEventListener("DOMContentLoaded", function () {
	var ausgabe = document.getElementById('ausgabe'),
		backgroundColors = ['Yellow', 'Chocolate', 'LightPink', 'LightGreen', 'Aquamarine'],
		intervalId = null,
		main = document.getElementById('buehne'),
		start = document.getElementById('start'),
		stop = document.getElementById('stop');
 
	function startAni() {
		intervalId = window.setInterval(flashText, 1000);
		ausgabe.textContent = 'Farbwechsler aktiv';
	}
 
	function flashText() {
		main.style.backgroundColor = backgroundColors[
			Math.floor(Math.random() * backgroundColors.length)
		];
	}
 
	function stopAni() {
		window.clearInterval(intervalId);
		ausgabe.textContent = 'kein Farbwechsler';
		main.style.backgroundColor = "";
	}
 
	if (start && stop) {
		start.addEventListener('click', startAni);
		stop.addEventListener('click', stopAni);
	}
});

Bei einem Klick auf den linken Button wird die Funktion startAni() aufgerufen und die Animation gestartet: In der Funktion flashText() erhält das Element mit der id buehne alle 1000 Millisekunden eine andere Hintergrundfarbe, die per Zufallsfunktion aus dem Array backgroundColors ausgewählt wird. Zusätzlich wird ein Text eingeblendet, der einen Hinweis auf den Stop-Button erhält.

Beachten Sie: Wenn Sie den Start-Button mehrfach drücken, vervielfacht sich die Geschwindigkeit, in der die Animation abläuft.

Bei einem Klick auf den rechten Button wird die Animation mit clearInterval() unterbrochen.

Beachten Sie: Berücksichtigen Sie die Hinweise bezüglich verzögerter Auslösung unter setTimeout.

Weblinks

• WHATWG: dom-setinterval
• MDN: Window.setInterval