setTimeOut() vs. setInterval()

von

setTimeout():

  • Führt eine Funktion einmal nach einer Verzögerung aus

Use-Cases:

  • Delayed Actions
  • Debouncing
  • Kurzzeitige UI-Effekte (z. B. Tooltip ausblenden)
const timeoutId = setTimeout(() => {
  console.log("Einmal nach 2 Sekunden");
}, 2000);

Abbrechen:

clearTimeout(timeoutId);

setInterval():

  • Führt eine Funktion regelmäßig in festen Intervallen aus

Use-Cases:

  • Polling
  • Timer / Countdown
  • Regelmäßige UI-Updates
const intervalId = setInterval(() => {
  console.log("Alle 1 Sekunde");
}, 1000);

Abbrechen:

clearInterval(intervalId);

Wichtige Unterschiede

FeaturesetTimeoutsetInterval
AusführungEinmalWiederholt
BeendenclearTimeoutclearInterval
Typischer EinsatzVerzögerungWiederkehrende Tasks

Best Practices

  • IDs immer speichern, um Timer stoppen zu können
  • In React: Timer in useEffect registrieren und im Cleanup beenden
  • Für präzises Timing besser erneut setTimeout nutzen statt setInterval
useEffect(() => {
  const id = setTimeout(doSomething, 1000);
  return () => clearTimeout(id);
}, []);