JavaScript Academy · Lektion

queueMicrotask und Reihenfolge

Steuern Sie die Ausführungsreihenfolge präzise.

Lektion 4 von 413 Schritte

queueMicrotask und Reihenfolge ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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.

queueMicrotask kennenlernen

queueMicrotask ist eine direkte Möglichkeit, eine Microtask einzuplanen, ohne ein Promise zu erstellen. Der Callback wird nach dem aktuellen synchronen Code, aber vor jeder Makrotask ausgeführt.

Es ist das sauberste Werkzeug, um Arbeit bis zum unmittelbar nächsten Microtask-Checkpoint zurückzustellen.

Grundlegende Verwendung

Übergeben Sie queueMicrotask eine Funktion. Sie wird ausgeführt, sobald der synchrone Code beendet ist.

console.log('start');
queueMicrotask(() => console.log('microtask'));
console.log('end');

Dieselbe Priorität wie Promises

Ein queueMicrotask-Callback und ein Promise-.then verwenden dieselbe Microtask-Warteschlange. Sie werden in der Reihenfolge ausgeführt, in der sie eingeplant wurden.

queueMicrotask(() => console.log('qmt 1'));
Promise.resolve().then(() => console.log('promise'));
queueMicrotask(() => console.log('qmt 2'));
console.log('sync');

Hat Vorrang vor setTimeout

Wie alle Microtasks wird ein queueMicrotask-Callback vor jeder setTimeout-Makrotask ausgeführt, selbst wenn diese früher eingeplant wurde.

setTimeout(() => console.log('timeout (macro)'), 0);
queueMicrotask(() => console.log('microtask (micro)'));
console.log('sync');

Reihenfolge beim Abarbeiten

Microtasks werden nach dem FIFO-Prinzip ausgeführt. Die zuerst eingereihte Microtask wird beim Abarbeiten zuerst ausgeführt.

queueMicrotask(() => console.log('1'));
queueMicrotask(() => console.log('2'));
queueMicrotask(() => console.log('3'));
console.log('sync done');

Microtasks verschachteln

Eine Microtask kann eine weitere Microtask einreihen. Die neue wird beim selben Abarbeiten nach den bereits eingereihten Microtasks und vor jeder Makrotask ausgeführt.

queueMicrotask(() => {
  console.log('A');
  queueMicrotask(() => console.log('C (nested)'));
});
queueMicrotask(() => console.log('B'));
setTimeout(() => console.log('D (macro)'), 0);
console.log('sync');

Vollständiges Beispiel zur Reihenfolge

Kombinieren Sie synchronen Code, Microtasks und eine Makrotask. Verfolgen Sie die Regel: zuerst synchroner Code, dann die Microtasks in ihrer Reihenfolge und anschließend der Timer.

console.log('1 sync');
setTimeout(() => console.log('5 macro'), 0);
queueMicrotask(() => console.log('3 micro'));
Promise.resolve().then(() => console.log('4 micro'));
console.log('2 sync');

Verzahnung mit async/await

Auch eine Fortsetzung nach einem await ist eine Microtask und wird daher entsprechend der Einplanungsreihenfolge mit queueMicrotask verzahnt.

async function task() {
  console.log('a');
  await null;
  console.log('d (after await)');
}
queueMicrotask(() => console.log('c (queueMicrotask)'));
task();
console.log('b');

Warum queueMicrotask verwenden

Verwenden Sie es, wenn Sie einen kleinen Arbeitsschritt nach dem aktuellen Aufrufstapel, aber vor dem nächsten Rendern des Browsers oder dem Auslösen eines Timers zurückstellen müssen. Dadurch vermeiden Sie den Aufwand und die Auflösungssemantik eines nur dafür erstellten Promise.

let ready = false;
queueMicrotask(() => {
  ready = true;
  console.log('ready is now', ready);
});
console.log('ready is', ready);

Endlose Microtask-Schleifen vermeiden

Da Microtasks vollständig vor Macrotasks abgearbeitet werden, blockiert ein Callback, der sich immer wieder selbst einreiht, Timer und Rendering dauerhaft. Sorgen Sie immer für eine Abbruchbedingung.

let n = 0;
function step() {
  if (n++ < 3) {
    console.log('step ' + n);
    queueMicrotask(step);
  }
}
setTimeout(() => console.log('macro runs after all micros'), 0);
step();

Das vollständige mentale Modell

In jeder Runde der Event Loop wird eine Makrotask (oder das initiale Skript) ausgeführt, anschließend werden alle Microtasks abgearbeitet, danach wird gerendert und die nächste Runde beginnt. Mit queueMicrotask können Sie gezielt in diese Abarbeitungsphase eingreifen.

console.log('script start');
setTimeout(() => console.log('setTimeout'), 0);
queueMicrotask(() => console.log('queueMicrotask'));
Promise.resolve().then(() => console.log('promise then'));
console.log('script end');

Kurze Überprüfung

Wann wird ein queueMicrotask-Callback im Verhältnis zu setTimeout(fn, 0) ausgeführt?

Beantworte es in der interaktiven Lektion

Zusammenfassung: queueMicrotask und Reihenfolge

Sie beherrschen jetzt die Feinsteuerung der Einplanung:

queueMicrotask plant eine Microtask ohne ein Promise ein.
Es verwendet gemeinsam mit Promise-Callbacks die Microtask-Warteschlange in FIFO-Reihenfolge.
Alle Microtasks werden vor jeder Makrotask und vor dem Rendering abgearbeitet.
Das Schleifenmodell lautet: Makrotask, Microtasks abarbeiten, rendern, wiederholen.

Kostenlos starten

Lerne JavaScript mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 59
Lektionen: 200

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „queueMicrotask und Reihenfolge“ kostenlos?

Ja — der vollständige Text von „queueMicrotask und Reihenfolge“ 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 „queueMicrotask und Reihenfolge“?

Steuern Sie die Ausführungsreihenfolge präzise. 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 4 von 4.

Wie lange dauert die Lektion „queueMicrotask und Reihenfolge“?

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

← Zurück zu JavaScript Academy