0Pricing
JavaScript Academy · Lektion

Event Loop und Grundlagen von Task und Microtask

Sehen, wie die Event Loop zuerst synchronen Code, dann Microtasks und anschließend Tasks ausführt. Mit setTimeout, Promise.then und queueMicrotask üben

Event Loop und Grundlagen von Task und Microtask 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 die Event Loop

Ziel: Lernen Sie die grundlegende Reihenfolge kennen: Synchroner Code → Microtasks (Promise/queueMicrotask) → Tasks (setTimeout).

  • Synchroner Code zuerst
  • Microtasks danach
  • Tasks zuletzt
Event Loop und Grundlagen von Task und Microtask — Illustration 1

Synchron zuerst

Synchrone Anweisungen werden von oben nach unten ausgeführt, bevor Rückrufe aus einer Warteschlange ausgeführt werden.

// Sync code runs immediately
console.log("A: sync start");

console.log("B: sync middle");

console.log("C: sync end");
Event Loop und Grundlagen von Task und Microtask — Illustration 2

Grundlagen der Task-Warteschlange

setTimeout legt einen Task in die Warteschlange. Er wird ausgeführt, nachdem der aktuelle Durchlauf abgeschlossen ist.

// Tasks (macrotasks) via setTimeout
console.log("1: start");

setTimeout(function () {
  console.log("3: timeout task");
}, 0);

console.log("2: after scheduling");
Event Loop und Grundlagen von Task und Microtask — Illustration 3

Grundlagen von Microtasks

Promise.then fügt eine Microtask hinzu. Microtasks werden direkt nach dem synchronen Code und vor Tasks ausgeführt.

// Microtasks via Promise.then
console.log("X: sync");

Promise.resolve().then(function () {
  console.log("Y: microtask");
});

console.log("Z: after scheduling microtask");
Event Loop und Grundlagen von Task und Microtask — Illustration 4

Ablaufdemo

Erwartete Reihenfolge: Start → End → Microtask → Task.

// Order demo: microtask runs before task
console.log("Start");

setTimeout(function () {
  console.log("Task: timeout");
}, 0);

Promise.resolve().then(function () {
  console.log("Microtask: promise");
});

console.log("End");
Event Loop und Grundlagen von Task und Microtask — Illustration 5

queueMicrotask-Demo

queueMicrotask plant ebenfalls eine Microtask ein. Halten Sie Rückrufe klein, damit Apps flüssig bleiben.

// queueMicrotask is another way to schedule a microtask
console.log("S");

queueMicrotask(function () {
  console.log("M: microtask");
});

console.log("E");

// Tip: do not overuse microtasks; keep callbacks tiny
Event Loop und Grundlagen von Task und Microtask — Illustration 6

Quiz zu Microtasks und Tasks

Schnelltest: Regel für die Reihenfolge.

Event Loop und Grundlagen von Task und Microtask — Illustration 7

Zusammenfassung

Zusammenfassung: Die Event Loop führt zuerst synchronen Code aus, leert dann die Microtask-Warteschlange und führt anschließend Tasks aus. Verwenden Sie setTimeout für Tasks und Promise.then/queueMicrotask für Microtasks.

Event Loop und Grundlagen von Task und Microtask — Illustration 8

Häufig gestellte Fragen

Ist die Lektion „Event Loop und Grundlagen von Task und Microtask“ kostenlos?

Ja — der vollständige Text von „Event Loop und Grundlagen von Task und Microtask“ 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 „Event Loop und Grundlagen von Task und Microtask“?

Sehen, wie die Event Loop zuerst synchronen Code, dann Microtasks und anschließend Tasks ausführt. Mit setTimeout, Promise.then und queueMicrotask üben 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 „Event Loop und Grundlagen von Task und Microtask“?

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. Event Loop und Grundlagen von Task und Microtask
  2. Promises – Zustände, Verkettung und Fehlerbehandlung
  3. Promise.all / any / race / allSettled – das passende Werkzeug wählen
← Zurück zu JavaScript Academy