0Pricing
JavaScript Academy · Lektion

setTimeout, setInterval und Timer-Drift

Einmalige und wiederkehrende Tasks mit setTimeout/setInterval planen und eine einfache Technik kennenlernen, um Timer-Drift zu verringern

setTimeout, setInterval und Timer-Drift ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.

Einführung in Timer

Ziel: Arbeit sauber planen.

  • setTimeout: später einmalig ausführen
  • setInterval: wiederholt ausführen
  • Drift: Warum Timer ungenau werden
  • Einfache Behebung von Drift
setTimeout, setInterval und Timer-Drift — Illustration 1

setTimeout — einmalig

setTimeout(fn, ms) wird nach der Verzögerung einmal ausgeführt (Mindestzeit, keine exakte Zeitangabe).

// setTimeout schedules a one-off callback
console.log("A: start");

setTimeout(function () {
  console.log("B: after ~5ms");
}, 5);

console.log("C: scheduled");
setTimeout, setInterval und Timer-Drift — Illustration 2

setInterval — wiederholt

setInterval wird automatisch wiederholt. Verwenden Sie clearInterval(id), um die Wiederholung zu beenden.

// setInterval repeats; always clear it
let count = 0;

const id = setInterval(function () {
  count = count + 1;
  console.log("tick", count);

  // Stop after 3 ticks to avoid endless logs
  if (count >= 3) {
    clearInterval(id);
    console.log("stopped");
  }
}, 5);
setTimeout, setInterval und Timer-Drift — Illustration 3

Drift beobachten

Die tatsächlichen Abstände variieren. Arbeit, Geräteauslastung und die Event-Schleife verursachen Drift.

// Drift demo: expected vs actual timing
const targetMs = 5;
let last = Date.now();
let times = 0;

const driftId = setInterval(function () {
  const now = Date.now();
  const gap = now - last; // actual gap
  last = now;
  times = times + 1;
  console.log("gap~", gap, "ms");

  if (times >= 3) {
    clearInterval(driftId);
    console.log("done");
  }
}, targetMs);
setTimeout, setInterval und Timer-Drift — Illustration 4

Ausgerichtete Zeitplanung

Richten Sie die Ausführung an einer fortlaufend aktualisierten erwarteten Zeit aus: Berechnen Sie die nächste Verzögerung aus dieser Zeit, um eine zunehmende Abweichung zu vermeiden.

// Simple drift fix: schedule from the expected time
const step = 5;
let expected = Date.now() + step;
let ticks = 0;

function tick() {
  ticks = ticks + 1;
  const now = Date.now();
  const drift = now - expected; // positive if we are late
  console.log("drift:", drift, "ms");

  // Compute next expected time first
  expected = expected + step;

  // Next delay = time until the next expected timestamp
  const nextDelay = Math.max(0, expected - Date.now());

  if (ticks < 3) {
    setTimeout(tick, nextDelay);
  } else {
    console.log("aligned stop");
  }
}

setTimeout(tick, step);
setTimeout, setInterval und Timer-Drift — Illustration 5

Tipps und Checkliste

Tipps:

  • Rufen Sie nach Abschluss immer clearInterval auf.
  • Bevorzugen Sie ausgerichtete setTimeout-Schleifen für einen gleichmäßigen Takt.
  • Halten Sie Timer-Callbacks kurz, um Drift zu verringern.
setTimeout, setInterval und Timer-Drift — Illustration 6

Quiz zur Driftbehebung

Kurzer Check: Drift verringern

setTimeout, setInterval und Timer-Drift — Illustration 7

Zusammenfassung

Zusammenfassung: Verwenden Sie setTimeout für einmalige Ausführungen und setInterval für Wiederholungen (denken Sie daran, den Timer zu löschen). Verringern Sie Drift, indem Sie die nächsten Ausführungen an erwarteten Zeitpunkten ausrichten.

setTimeout, setInterval und Timer-Drift — Illustration 8

Häufig gestellte Fragen

Ist die Lektion „setTimeout, setInterval und Timer-Drift“ kostenlos?

Ja — der vollständige Text von „setTimeout, setInterval und Timer-Drift“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „setTimeout, setInterval und Timer-Drift“?

Einmalige und wiederkehrende Tasks mit setTimeout/setInterval planen und eine einfache Technik kennenlernen, um Timer-Drift zu verringern Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 3.

Wie lange dauert die Lektion „setTimeout, setInterval und Timer-Drift“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. setTimeout, setInterval und Timer-Drift
  2. Debounce vs. Throttle – selbst implementiert
  3. Animations-Timing – Einstieg mit zeitbasierten Schleifen
← Zurück zu JavaScript Academy