JavaScript/WindowOrWorkerGlobalScope/clearInterval

Die Methode Window.clearInterval() löscht ein Intervall, dass mit setInterval definiert wird.

Syntax

scope.clearInterval(intervall-ID)

• Intervall-ID: Rückgabewert von setInterval()

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.

Weblinks

• W3C: clearInterval
• MDN: Window.clearInterval