Window.clearTimeout() — Methode · JavaScript-Referenz

Signatur

Window.clearTimeout(timeoutID)

Beschreibung

clearTimeout() stoppt einen Timer, der mit setTimeout() angelegt wurde. Man übergibt die Kennung (ID), die setTimeout() zurückgegeben hat. Hat der Timer noch nicht ausgelöst, wird die Rückruffunktion nie ausgeführt.

Typische Einsatzfälle sind Debouncing (z. B. eine Suche erst starten, wenn der Nutzer aufgehört hat zu tippen), das Abbrechen verzögerter Aktionen wie Tooltips oder automatisch verschwindender Hinweise, eigene Zeitlimits für Anfragen sowie das Aufräumen beim Entfernen von Komponenten. So laufen keine Rückruffunktionen mehr, die auf bereits entfernte Elemente zugreifen.

Die Methode ist fehlertolerant: Ist die ID ungültig, bereits abgelaufen, schon gelöscht, undefined oder null, passiert einfach nichts. Es wird kein Fehler geworfen. Deshalb kann man clearTimeout() vorsorglich aufrufen, ohne vorher zu prüfen, ob der Timer noch läuft.

Parameter

Name	Typ	Default	Beschreibung
$timeoutID	number \| undefined		Die Kennung des Timers, die `setTimeout()` zurückgegeben hat. Bei ungültigen Werten passiert nichts.

Rückgabewert

Typ

void

Beschreibung

Gibt nichts zurück (undefined).

Beispiele

Geplante Aktion abbrechen

const id = setTimeout(() => {
  console.log('Wird nie ausgegeben');
}, 2000);

// Der Nutzer bricht vorher ab
clearTimeout(id);
console.log('Timer abgebrochen');

Timer abgebrochen

Debounce für ein Suchfeld

const debounce = (fn, delay = 300) => {
  let timerId;
  return (...args) => {
    clearTimeout(timerId); // vorherigen Timer verwerfen
    timerId = setTimeout(() => fn(...args), delay);
  };
};

const suche = debounce((begriff) => console.log(`Suche nach: ${begriff}`));

suche('J');
suche('Ja');
suche('Java'); // nur dieser Aufruf wird ausgeführt

Suche nach: Java

Zeitlimit für fetch mit Aufräumen

const ladeMitZeitlimit = async (url, ms = 5000) => {
  const controller = new AbortController();
  const timerId = setTimeout(() => controller.abort(), ms);
  try {
    const res = await fetch(url, { signal: controller.signal });
    return await res.json();
  } finally {
    clearTimeout(timerId); // Timer immer entfernen, auch bei Fehlern
  }
};

ladeMitZeitlimit('https://jsonplaceholder.typicode.com/todos/1')
  .then((daten) => console.log(daten.id))
  .catch((err) => console.error(err.name));

1

Tooltip mit Verzögerung

const button = document.querySelector('button');
let tooltipTimer;

button.addEventListener('mouseenter', () => {
  tooltipTimer = setTimeout(() => console.log('Tooltip anzeigen'), 500);
});

button.addEventListener('mouseleave', () => {
  clearTimeout(tooltipTimer); // Maus ging zu früh weg: kein Tooltip
});

// Wichtig · Fallstricke

Gemeinsamer ID-Vorrat: setTimeout() und setInterval() nutzen dieselben IDs. Deshalb funktioniert clearTimeout() technisch auch bei Intervallen. Für bessere Lesbarkeit sollte man trotzdem immer die passende Funktion verwenden (clearInterval() für Intervalle).
Zu spät aufgerufen: Wurde die Rückruffunktion schon ausgeführt oder läuft sie gerade, hat clearTimeout() keine Wirkung mehr.
ID-Variable im Gültigkeitsbereich: Die ID muss dort verfügbar sein, wo abgebrochen wird. Bei Debounce und Komponenten wird sie meist in einer Closure oder einer Instanzvariable gespeichert.
Node.js: Dort gibt setTimeout() ein Timeout-Objekt statt einer Zahl zurück. clearTimeout() akzeptiert dieses Objekt (und dessen Umwandlung in eine Zahl). In TypeScript verwendet man am besten ReturnType<typeof setTimeout> als Typ.
Aufräumen: In Frameworks (z. B. im Cleanup von React-useEffect) sollte man laufende Timer beim Entfernen einer Komponente löschen. Sonst drohen Speicherlecks und Zugriffe auf nicht mehr vorhandene Elemente.
Kompatibilität: Wird von allen Browsern unterstützt, auch in Web Workern (WorkerGlobalScope).

Siehe auch

Window.setTimeout() Window.setInterval() Window.clearInterval() Window.requestAnimationFrame() new LinearAccelerationSensor() new SubmitEvent()