Window.clearInterval() — Methode · JavaScript-Referenz

Signatur

window.clearInterval(intervalID)

Beschreibung

clearInterval() beendet einen Timer, der mit setInterval() angelegt wurde. Als Argument erwartet die Methode die numerische ID, die setInterval() zurückgibt. Danach wird die hinterlegte Callback-Funktion nicht mehr aufgerufen.

Verwenden Sie die Methode immer dann, wenn sich eine wiederholte Aktion erledigt hat oder nicht mehr gebraucht wird: Ein Countdown ist abgelaufen, ein Polling hat das gewünschte Ergebnis geliefert, eine Komponente wird aus dem DOM entfernt oder der Nutzer verlässt eine Ansicht. Wer Intervalle nicht beendet, riskiert Speicherlecks, unnötige CPU-Last und Netzwerkanfragen sowie Fehler durch Zugriffe auf DOM-Elemente, die gar nicht mehr existieren.

setTimeout() und setInterval() teilen sich denselben ID-Pool. Technisch lässt sich daher mit clearInterval() auch ein Timeout beenden und umgekehrt. Aus Gründen der Lesbarkeit sollten Sie aber immer die passende Funktion verwenden. Ungültige Werte wie undefined, null oder bereits beendete IDs werden ohne Fehlermeldung ignoriert.

Parameter

Name	Typ	Default	Beschreibung
$intervalID	number \| undefined		Die Kennung des zu beendenden Intervalls, also der Rückgabewert von `setInterval()`. Bei einem ungültigen oder fehlenden Wert passiert nichts, und es wird auch kein Fehler geworfen.

Rückgabewert

Typ

undefined

Beschreibung

Keine Rückgabe. Die Methode gibt immer undefined zurück.

Beispiele

Countdown nach Ablauf stoppen

let seconds = 3;

const id = setInterval(() => {
  console.log(`Noch ${seconds} Sekunden`);
  seconds--;

  if (seconds < 0) {
    clearInterval(id); // Intervall beenden
    console.log('Start!');
  }
}, 1000);

Noch 3 Sekunden Noch 2 Sekunden Noch 1 Sekunden Noch 0 Sekunden Start!

Start-/Stopp-Uhr mit Buttons

// HTML: <button id="start">Start</button> <button id="stop">Stopp</button> <span id="clock"></span>
const clock = document.querySelector('#clock');
let timerId = null;

document.querySelector('#start').addEventListener('click', () => {
  if (timerId !== null) return; // kein doppeltes Intervall starten
  timerId = setInterval(() => {
    clock.textContent = new Date().toLocaleTimeString('de-DE');
  }, 1000);
});

document.querySelector('#stop').addEventListener('click', () => {
  clearInterval(timerId);
  timerId = null; // Zustand zurücksetzen
});

Polling beenden, sobald ein Job fertig ist

const pollJob = (jobId) => new Promise((resolve, reject) => {
  let attempts = 0;

  const id = setInterval(async () => {
    attempts++;
    try {
      const res = await fetch(`/api/jobs/${jobId}`);
      const { status } = await res.json();

      if (status === 'done' || attempts >= 10) {
        clearInterval(id);
        resolve(status);
      }
    } catch (err) {
      clearInterval(id); // auch im Fehlerfall aufräumen!
      reject(err);
    }
  }, 2000);
});

pollJob(42).then((status) => console.log('Job-Status:', status));

Job-Status: done

Aufräumen beim Entfernen einer Komponente

class LiveTicker extends HTMLElement {
  connectedCallback() {
    this.count = 0;
    this.intervalId = setInterval(() => {
      this.textContent = `Updates: ${++this.count}`;
    }, 500);
  }

  disconnectedCallback() {
    clearInterval(this.intervalId); // verhindert Speicherlecks
  }
}

customElements.define('live-ticker', LiveTicker);

// Wichtig · Fallstricke

ID sichern: Ohne gespeicherte ID lässt sich ein Intervall nicht mehr beenden. Wird setInterval() mehrfach aufgerufen, zum Beispiel durch wiederholte Klicks, und dabei immer dieselbe Variable überschrieben, laufen die älteren Intervalle unbemerkt weiter. Prüfen Sie deshalb vor dem Start, ob bereits ein Intervall läuft.
Keine Fehlermeldung: Bei ungültigen IDs meldet clearInterval() keinen Fehler. Tippfehler oder falsche Variablen bleiben so leicht unentdeckt.
Ein bereits laufender Callback wird nicht abgebrochen: Eine asynchrone Callback-Funktion, die schon gestartet ist (etwa ein laufender fetch), läuft trotz clearInterval() zu Ende. Wenn nötig, brechen Sie sie zusätzlich mit einem AbortController ab.
Gemeinsamer ID-Pool: clearInterval() und clearTimeout() sind technisch austauschbar. Für verständlichen Code sollten Sie trotzdem die jeweils passende Funktion verwenden.
Node.js: Dort gibt setInterval() ein Timeout-Objekt statt einer Zahl zurück. clearInterval() nimmt dieses Objekt entgegen. Code, der eine Zahl erwartet (z. B. TypeScript mit dem Typ number), muss das berücksichtigen, etwa mit ReturnType<typeof setInterval>.
Kompatibilität: Die Methode wird von allen Browsern unterstützt und steht auch in Web Workern über WorkerGlobalScope zur Verfügung.

Siehe auch

Window.setInterval() Window.setTimeout() Window.clearTimeout() Window.requestAnimationFrame() KeyboardLayoutMap.values() new NDEFReadingEvent()