0Pricing
JavaScript Academy · Lektion

Makrotasks und die Task-Queue

Verstehen Sie, wie Timer und I/O eingeplant werden.

Makrotasks und die Task-Queue ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. 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 4 Lektionen.

Was ist eine Makrotask?

Eine Makrotask (auch Task genannt) ist eine Arbeitseinheit, deren Ausführung für später eingeplant wird, nachdem der aktuelle synchrone Code abgeschlossen ist. Callbacks von setTimeout sind das klassische Beispiel.

Makrotasks warten in der Task-Queue, bis der Call-Stack leer ist.

setTimeout verschiebt Arbeit

setTimeout registriert einen Callback, der später ausgeführt werden soll. Selbst bei einer Verzögerung von 0 wird er nach dem gesamten aktuellen synchronen Code ausgeführt.

console.log('first');
setTimeout(() => console.log('third (timeout)'), 0);
console.log('second');

Die Task-Queue

Wenn ein Timer ausläuft, wird sein Callback in die Task-Queue eingereiht. Die event loop nimmt erst dann eine Task aus dieser Queue, wenn der Call-Stack leer ist, führt sie vollständig aus und prüft anschließend erneut.

console.log('sync start');
setTimeout(() => console.log('task 1'), 0);
setTimeout(() => console.log('task 2'), 0);
console.log('sync end');

Tasks werden in Einreihungsreihenfolge ausgeführt

Tasks mit derselben Verzögerung werden in der Reihenfolge ausgeführt, in der sie eingeplant wurden. Die Task-Queue folgt dem FIFO-Prinzip: zuerst hinein, zuerst hinaus.

setTimeout(() => console.log('A'), 0);
setTimeout(() => console.log('B'), 0);
setTimeout(() => console.log('C'), 0);
console.log('sync');

Die Verzögerung ist ein Mindestwert, kein exakter Zeitpunkt

Die übergebene Verzögerung ist die Mindestzeit, bevor der Callback ausgeführt werden kann. Tatsächlich wird er erst ausgeführt, wenn der Stack geleert ist und frühere Tasks abgeschlossen sind, daher kann es später sein.

setTimeout(() => console.log('100ms'), 100);
setTimeout(() => console.log('0ms'), 0);
console.log('synchronous runs first');

Sortierung nach Verzögerung

Unterschiedliche Verzögerungen verändern die Reihenfolge: Kürzere Verzögerungen werden früher ausführbar und daher im Allgemeinen vor längeren ausgeführt – unabhängig von der Einreihungsreihenfolge.

setTimeout(() => console.log('50'), 50);
setTimeout(() => console.log('10'), 10);
setTimeout(() => console.log('30'), 30);
console.log('start');

Eine Task pro Schleifendurchlauf

Die event loop führt pro Durchlauf genau eine Makrotask aus und erledigt anschließend weitere Arbeit, bevor der nächste Durchlauf beginnt. Dadurch bleibt das System zwischen den Tasks reaktionsfähig.

console.log('1');
setTimeout(() => {
  console.log('2');
  setTimeout(() => console.log('4'), 0);
}, 0);
setTimeout(() => console.log('3'), 0);

Verschachtelte Timer werden später eingereiht

Ein innerhalb einer Task eingeplanter Timer wird hinter bereits wartenden Tasks in die Queue eingereiht und daher in einem späteren Schleifendurchlauf ausgeführt.

setTimeout(() => {
  console.log('outer');
  setTimeout(() => console.log('inner nested'), 0);
}, 0);
setTimeout(() => console.log('sibling'), 0);

setInterval sind ebenfalls Makrotasks

setInterval plant eine sich wiederholende Makrotask ein. Hier führen wir einige Wiederholungen aus und beenden sie mit clearInterval, damit die Ausgabe begrenzt bleibt.

let count = 0;
const id = setInterval(() => {
  count++;
  console.log('tick ' + count);
  if (count === 3) clearInterval(id);
}, 10);
console.log('interval scheduled');

Synchron gewinnt immer

Unabhängig davon, wie klein die Verzögerung ist, wartet jede Makrotask hinter dem gesamten synchronen Code des aktuellen Durchlaufs. Der Stack muss zuerst leer sein.

setTimeout(() => console.log('macrotask'), 0);
for (let i = 1; i <= 3; i++) console.log('sync ' + i);
console.log('done sync');

Warum Makrotasks wichtig sind

Makrotasks ermöglichen es, Arbeit aufzuschieben, ohne zu blockieren. Wenn Sie eine aufwendige Aufgabe in zeitgesteuerte Abschnitte aufteilen, bleibt eine Anwendung reaktionsfähig. Makrotasks haben jedoch nicht die höchste Priorität: Mikrotasks (Promises) werden vor der nächsten Makrotask ausgeführt, wie Sie als Nächstes sehen werden.

console.log('schedule');
setTimeout(() => console.log('runs after sync'), 0);
console.log('still sync');

Kurzer Test

Wann wird ein Callback von setTimeout(cb, 0) ausgeführt?

Zusammenfassung: Makrotasks

Sie haben gelernt, wie aufgeschobene Arbeit eingeplant wird:

  • Makrotasks (setTimeout, setInterval) warten in der Task-Queue.
  • Die Queue folgt dem FIFO-Prinzip; die event loop führt pro Durchlauf eine Task aus.
  • Die Verzögerung ist ein Mindestwert, und synchroner Code wird immer zuerst ausgeführt.
  • Mikrotasks haben eine höhere Priorität – das erkunden Sie als Nächstes.

Häufig gestellte Fragen

Ist die Lektion „Makrotasks und die Task-Queue“ kostenlos?

Ja — der vollständige Text von „Makrotasks und die Task-Queue“ 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 4 Lektionen.

Was lerne ich in „Makrotasks und die Task-Queue“?

Verstehen Sie, wie Timer und I/O eingeplant werden. 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 2 von 4.

Wie lange dauert die Lektion „Makrotasks und die Task-Queue“?

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. Der Call Stack
  2. Makrotasks und die Task-Queue
  3. Mikrotasks und Promises
  4. queueMicrotask und Reihenfolge
← Zurück zu JavaScript Academy