JavaScript/Window/setInterval

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

  • JavaScript 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

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)

[Bearbeiten] Anwendungsbeispiel

Beispiel ansehen …
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.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML