Window.setInterval() — Methode · JavaScript-Referenz

Signatur

setInterval(func, delay, ...args)

Beschreibung

setInterval() plant eine Funktion so ein, dass sie immer wieder im Abstand von delay Millisekunden ausgeführt wird, bis das Intervall mit clearInterval() beendet wird oder die Seite geschlossen wird. Die Methode gibt es global über window (bzw. self in Workern), man ruft sie also meist einfach als setInterval(...) auf.

Typische Anwendungsfälle sind Polling (z. B. regelmäßig den Server nach Status-Updates fragen), Uhren und Countdowns, automatisches Speichern oder wechselnde Inhalte wie Slideshows. Für Animationen ist dagegen requestAnimationFrame() besser geeignet, weil es sich an die Bildwiederholrate des Bildschirms anpasst.

Wichtig ist: delay ist ein Mindestabstand und keine Garantie. Die Callback-Funktion landet in der Task-Warteschlange und läuft erst, wenn der Haupt-Thread frei ist. Braucht der Callback länger als das Intervall, werden Aufrufe nicht nachgeholt, sondern ausgelassen bzw. zusammengelegt. Bei asynchroner Arbeit wie fetch ist ein rekursives setTimeout() oft die sauberere Wahl, weil dann der nächste Aufruf erst nach Abschluss des vorherigen eingeplant wird.

Parameter

Name	Typ	Default	Beschreibung
$func Pflicht	Function \| string		Die Funktion, die bei jedem Intervall aufgerufen wird. Alternativ ist ein String mit Code möglich, der wie bei `eval()` ausgeführt wird. Davon wird dringend abgeraten.
$delay	number	0	Zeitabstand in Millisekunden zwischen den Aufrufen. Werte unter 10 ms werden in Browsern in der Regel auf mindestens ca. 4 ms hochgesetzt (Clamping). Gilt als vorzeichenbehaftete 32-Bit-Ganzzahl, Maximum also 2147483647.
$...args	any		Zusätzliche Argumente, die bei jedem Aufruf an `func` übergeben werden.

Rückgabewert

Typ

number

Beschreibung

Eine positive ganze Zahl ungleich null (die Intervall-ID), die das Intervall eindeutig kennzeichnet. Man übergibt sie an clearInterval(), um das Intervall zu beenden. In Node.js wird stattdessen ein Timeout-Objekt zurückgegeben.

Beispiele

Einfache Digitaluhr

const uhr = document.querySelector('#uhr');

const aktualisieren = () => {
  uhr.textContent = new Date().toLocaleTimeString('de-DE');
};

aktualisieren(); // sofort anzeigen, nicht erst nach 1 s
const uhrId = setInterval(aktualisieren, 1000);

Das Element #uhr zeigt jede Sekunde die aktuelle Uhrzeit, z. B. "14:32:07".

Countdown mit clearInterval() beenden

let sekunden = 5;

const countdownId = setInterval(() => {
  console.log(`Noch ${sekunden} Sekunden …`);
  sekunden -= 1;

  if (sekunden < 0) {
    clearInterval(countdownId);
    console.log('Los geht\'s!');
  }
}, 1000);

Noch 5 Sekunden … Noch 4 Sekunden … Noch 3 Sekunden … Noch 2 Sekunden … Noch 1 Sekunden … Noch 0 Sekunden … Los geht's!

Zusätzliche Argumente übergeben

const protokollieren = (prefix, einheit) => {
  console.log(`${prefix}: ${performance.now().toFixed(0)} ${einheit}`);
};

const id = setInterval(protokollieren, 2000, 'Laufzeit', 'ms');

// Nach 7 Sekunden stoppen
setTimeout(() => clearInterval(id), 7000);

Laufzeit: 2003 ms Laufzeit: 4004 ms Laufzeit: 6005 ms

Status-Polling – sicherer mit rekursivem setTimeout

// Problem mit setInterval: dauert fetch länger als 3 s, überlappen sich Anfragen.
// Lösung: den nächsten Aufruf erst nach Abschluss einplanen.
const pollStatus = async () => {
  try {
    const res = await fetch('/api/job/42/status');
    const { status } = await res.json();
    console.log('Status:', status);
    if (status === 'fertig') return; // Polling beenden
  } catch (err) {
    console.error('Polling fehlgeschlagen:', err);
  }
  setTimeout(pollStatus, 3000);
};

pollStatus();

Status: läuft Status: läuft Status: fertig

// Wichtig · Fallstricke

Intervall immer aufräumen: Speichere die ID und rufe clearInterval(id) auf, wenn das Intervall nicht mehr gebraucht wird, z. B. beim Entfernen einer Komponente (React-useEffect-Cleanup, Vue-unmounted). Sonst entstehen Speicherlecks und „Geister-Aufrufe“.
Keine Garantie für exakte Zeiten: Durch Auslastung des Haupt-Threads verschiebt sich das Intervall mit der Zeit (Drift). Für genaue Uhren oder Countdowns sollte man die Zeit mit Date.now() oder performance.now() berechnen, statt die Aufrufe mitzuzählen.
Drosselung im Hintergrund: In inaktiven Tabs führen Browser Intervalle höchstens etwa einmal pro Sekunde aus. Chrome drosselt „intensiv“ nach 5 Minuten sogar auf einmal pro Minute. Verschachtelte Timer ab der 5. Ebene werden auf mindestens 4 ms hochgesetzt.
Sicherheit – kein String-Code: Wird func als String übergeben, wird er wie eval() ausgeführt. Das ist ein XSS-Risiko, wenn Benutzereingaben darin landen. Unter einer Content-Security-Policy ohne 'unsafe-eval' wird es blockiert. Übergib immer eine Funktion.
this-Kontext: Eine normale Funktion (function) wird mit this === window aufgerufen, im Strict Mode mit undefined. Übergibst du eine Objektmethode wie setInterval(obj.methode, 1000), geht der Bezug zu obj verloren. Nutze eine Pfeilfunktion oder bind().
Überlauf: Ist delay größer als 2147483647 ms (ca. 24,8 Tage), läuft der Wert über und der Callback wird sofort ausgeführt.
IDs von setInterval() und setTimeout() kommen aus demselben Pool. Technisch lassen sich beide mit beiden Clear-Funktionen löschen, aus Gründen der Lesbarkeit sollte man das aber vermeiden.

Siehe auch

Window.clearInterval() Window.setTimeout() Window.clearTimeout() Window.requestAnimationFrame() Window.queueMicrotask() Performance.now() Response.textStream()