JavaScript/WindowOrWorkerGlobalScope/setInterval

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

Syntax:

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

• scope: das Objekt, auf dem die Methode setIntervall aufgerufen wird, z.B. window
• func: entweder eine anonyme Funktion oder der Name einer Funktion.
• delay: Zeitabstand in Millisekunden zwischen den Funktionsaufrufen.
• intervalID: die Interval-Id (für clearInterval)
• param1, param2, ...: Parameter für die Funktion func

Anwendungsbeispiele

Walking Man

Beispiel ansehen …

document.addEventListener('DOMContentLoaded', function(event) {
	var x = 40, y = 40, dx = 1, dy = 1, phi = 0,
	    div = document.querySelector('div');

	window.setInterval(function() {
		phi += Math.random()-0.5;
		dx = Math.sin(phi);
		dy = Math.cos(phi);
		x += dx;
		y += dy;
		if ( x > 100) {
			x -= 100;
		}
		else if ( x < 0) {
			x += 100;
		}
		if(y>100) {
		    y -= 100;
		}
		else if(y<0) {
			y += 100;
		}
		div.style.left = x +"vw";
		div.style.top  = y +"vh";
	},100);
});

Mit window.setInterval wird eine anonyme Funktion alle 100ms aufgerufen. Über Math.random wird phi ein Zufallswert zugewiesen, der die Werte der zwei Variablen dx und dy für den Versatz ändert. Ausgehend vom aktuellen Standort x und y wird nun die Position durch Addition mit dem Versatz verschoben. Wenn der „Walking Man“ den Rand des Viewports erreicht, wird der Wert für x, bzw, y nicht mehr vergrößert, sondern durch x -= 100; wieder schrittweise reduziert.

Random Walk 2

Im oberen Beispiel bewegte sich der Wanderer, man konnte aber keine Richtungsänderung sehen, das nächste Beispiel geht den nächsten Schritt zum künstlichen Laufen:

Beispiel ansehen …

document.addEventListener("DOMContentLoaded", function(event) {
	var x=40, y=40, dx, dy, phi = 0,
	    wanderer = document.querySelector("#Wanderer");
	window.setInterval(function() {
		phi += Math.random()-0.5;
		dx = Math.cos(phi);
		dy = Math.sin(phi);
 		x += dx;
 		y += dy;
		wanderer.style.transition = "all linear 0.1s";
		if(x>100) {
			x -= 100;
			wanderer.style.transition = "none";
		}
		else if(x<0) {
			x += 100;
			wanderer.style.transition = "none";
		}
		if(y>100) {
			y -= 100;
			wanderer.style.transition = "none";
		}
		else if(y<0) {
			y += 100;
			wanderer.style.transition = "none";
		}
		wanderer.style.left = x +"vw";
		wanderer.style.top  = y +"vh";
		wanderer.style.transform = "translate(-50%,-50%) rotate("+phi+"rad)";
	},100);
});

Das obere Beispiel wird erweitert. Zusätzlich zum zufälligen Versatz der x und y-Koordinaten wird nun auch die Richtung des Wanderers geändert. Dieser ist jetzt kein blaues Quadrat mehr, sondern das Bild einer Fliege.

Farbwechsler

Dieses Beispiel für einen Farbwechsler würde man heute nicht mehr so umsetzen. Änderungen am CSS sollten durch das Setzen von Klassen mit className und classList erreicht werden. Das periodische Wechseln von CSS-Festlegungen können Sie mit CSS-animation und, wenn Sie es mit JavaScript steuern wollen, mit Web Animations viel leichter realisieren.

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.
Dies könnten Sie unterbinden, wenn der Start-Button nach dem Aufruf von startAni() zum stop-Button verändert würde

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

• Felix Riesterer: Silly Clock DOM Version
• jqueryaz.com: Using JavaScript setInterval with clearInterval: 4 demos