JS setTimeout und setInterval – Timer und Polling

Animations-Methoden in Javascript

Die Grundidee der Animation mit Javascript: Mach ein Element Bild für Bild in schneller Folge sichtbar oder unsichtbar, bewege es oder verändere sein Aussehen nach und nach. Dabei entsteht eine Sequenz von Einzelbildern oder Frames, die schnell genug aufeinander folgen, dass die Bewegung fließend und natürlich wirkt.

Lemmings, das Computerspiel des Entwicklers DMA Design (1991)

setTimeout

Javascript window.setTimeout(action, timeout) gibt an, dass Anweisungen nach einer bestimmten Zeit timeout (angegeben in Millisekunden) ausgeführt werden, und wird für einfache verzögerte Aktionen eingesetzt.

setTimeout(() => {
	console.log("Diese Nachricht erscheint nach 3 Sekunden");
	document.querySelector("#ping").innerHTML = "🎉"
}, 3000);
     ▲
     |
     └--- Timeout in Millisekunden

Javascript setTimeout() führt die Anweisungen exakt einmal aus (und der Timer ist nicht besonders exakt) und dann nie wieder. Um Anweisungen wiederholt durchzuführen, muss das Skript wiederholt aufgerufen werden – z.B. rekursiv oder in einer Schleife. In diesem Beispiel prüft das Skript alle 5 Sekunden, ob neue Nachrichten vorliegen.

function checkForNewMessages() {
	fetch("/api/messages")
		.then(response => response.json())
		.then(data => {
			console.log("Neue Nachrichten:", data);
		})
		.catch(error => console.error("Fehler:", error))
		.finally(() => {
			setTimeout(checkForNewMessages, 5000); // Nach 5 Sekunden erneut abfragen
		});
	}

checkForNewMessages(); // Erster Aufruf

clearTimeout()

Die Funktion setTimeout() gibt einen einfachen Wert zurück – einen Verweis auf den Timeout. Die Referenz auf setTimeout() wird benötigt, um den Timeout abzubrechen und die Ausführung der Anweisungen zu unterbinden.

       Zeit in Millisekunden bis  ──┐
       zum Aufruf der Anweisungen   │
                                    │
          Anweisung oder  ──┐       │
          Callback-Funktion │       │ 
                            ▼       ▼
const ani = setTimeout ( action, timeout );
       ▲
       |
       └--- optionale Referenz, mit der
            setTimeout abgebrochen werden kann

Javascript clearTimeout() cancelt den Aufruf von setTimeout().

window.clearTimeout(ani);

setInterval()

Javascript setInterval(action, delay) wiederholt Anweisungen in einem Interval von delay Millisekunden und eignet sich für wiederkehrende Aktionen in festen Abständen, z. B. Countdown, einfache Animationen und Hintergrundaufgaben.

setInterval(() => {
	console.log("Diese Nachricht erscheint alle 5 Sekunden");
}, 5000);

setInterval() läßt sich mit einer anonymen Funktion aufrufen. Das hält den Scriptcode besser zusammen als var interval = window.setInterval (code, delay) und ersetzt auch eine externe Funktion. Das Beispiel erzeugt einen Countdown mit setInterval().

const timerId = setInterval ( function tick() {
   let counter = parseInt(document.getElementById("counter").textContent);
   if (counter < 1) {
      clearInterval(timerId)
   } else 
      document.getElementById("counter").textContent = counter - 1;
}, 1000);

clearInterval() ist das Äquivalent zu clearTimeout(), um den Timer zu speichern und die Aktion abzubrechen.

let intervalId = setInterval(() => {
	console.log("Alle 3 Sekunden!");
}, 3000);

clearInterval(intervalId); // Stoppt den Timer

setTimeout() vs setInterval()

• setInterval() führt die Anweisungen sofort und dann alle 1000 / 2000 … Millisekunden durch
• setTimeout() wartet 1000 / 2000 … Millisekunden, führt die Funktion aus (und braucht dafür ein paar Millisekunden) und wartet dann auf den nächsten Timeout. Die Zeitspanne zwischen zwei Frames ist also einen Tick größer als 1000 / 2000 … Millisekunden.

setTimeout(), setInterval(), requestAnimationFrame, Web Animation API

setTimeout() und setInterval() wurden früher für Animationen eingesetzt. requestAnimationFrame kam erst später als Verbesserung hinzu.