Aufgabe 04 - Reihenfolge-Rätsel

Aufgabe 04 - Reihenfolge-Rätsel

Worum geht es?

Wer den Event Loop verstanden hat, kann asynchronen Code vorhersagen. Sie bestimmen die Ausgabereihenfolge vorbereiteter Codeschnipsel, prüfen Ihre Vorhersagen am Rechner und konstruieren eigene Rätsel für andere (siehe Kapitel Nebenläufigkeit I). Die Übung ist bewusst eine Denk- statt Tippübung: Der Event Loop entscheidet über jedes Async-Verhalten des restlichen Jahres.

Was Sie dafür brauchen

• Kapitel Nebenläufigkeit I, Abschnitte Event Loop und Promises.
• Node.js oder Browser-Konsole; das Rätselblatt puzzles.js (acht Codeschnipsel; Mischung aus synchronem Code, setTimeout(..., 0), Promise-then und async/await). Jedes Rätsel ist eine eigene Funktion puzzle1() bis puzzle8(); ein Runner am Dateiende führt alle nacheinander aus.

Welche Kompetenzen Sie erwerben und zeigen

• Sie sagen die Ausführungsreihenfolge asynchronen Codes korrekt voraus.
• Sie argumentieren mit dem Event-Loop-Modell statt mit Bauchgefühl.
• Sie konstruieren lehrreiche Fehlvorstellungs-Beispiele für andere.

Pädagogische Einordnung

• Reproduktion: das Event-Loop-Modell wiedergeben und einfache Fälle vorhersagen (Teil A).
• Reorganisation und Transfer: das Modell auf kombinierte Fälle anwenden und Abweichungen erklären (Teile B und C).
• Reflexion, Problemlösung und Urteilsbildung: eigene Rätsel konstruieren, die ein Missverständnis gezielt ausnutzen (Teil D).

Arbeitsaufträge

Die Übung ist auf etwa zwei Stunden ausgelegt. Teil D ist der Expertenteil.

Teil A - Aufwärmen

1. Sagen Sie die Ausgabe voraus und prüfen Sie danach:

   console.log("one");
   setTimeout(() => console.log("two"), 0);
   console.log("three");

2. Erklären Sie in zwei Sätzen mit den Begriffen Call Stack und Task Queue, warum two zuletzt kommt, obwohl der Timer auf 0 steht.

Teil B - Die acht Rätsel

Für jeden Schnipsel des Rätselblatts: erst die vorhergesagte Reihenfolge verbindlich notieren (Kugelschreiber-Ehrlichkeit, nichts nachträglich ändern), dann ausführen. Bei jeder Abweichung: ein bis zwei Sätze, was Sie übersehen haben. Die Trefferquote ist unerheblich; bewertet wird die Qualität der Erklärungen.

Teil C - Das Modell

1. Zeichnen Sie das Event-Loop-Modell als Skizze (Call Stack, Laufzeitumgebung/Timer, Task Queue, Loop).
2. Erklären Sie an der Skizze eines der Rätsel aus Teil B schriftlich Schritt für Schritt: Was liegt wann wo?
3. Formulieren Sie die zwei Merksätze des Kapitels zu “später, nie zwischendurch” und “Blockieren blockiert alles” in eigenen Worten.

Teil D - Expertenteil: Eigene Rätsel

1. Konstruieren Sie zwei eigene Rätsel: eines, das ein typisches Missverständnis ausnutzt (Kandidaten: await in einer Schleife, vergessenes await, then gemischt mit await), und eines, dessen Ausgabe auf den ersten Blick unmöglich wirkt, aber fair erklärbar ist.
2. Schreiben Sie zu jedem Rätsel die Musterlösung: erwartete Ausgabe plus Erklärung am Modell.
3. Tauschen Sie mit einer Kollegin oder einem Kollegen und lösen Sie deren Rätsel. Bewerten Sie gegenseitig: Täuscht es? Ist es fair erklärbar? Ein gutes Rätsel erfüllt beides.
4. Zusatzfrage: Bauen Sie ein Rätsel, bei dem sich die Reihenfolge von then-Callbacks und setTimeout(..., 0) unterscheidet, und recherchieren Sie die Begriffe Microtask und Macrotask so weit, dass Sie den Unterschied in zwei Sätzen erklären können.

Wissenscheck

1. Wann arbeitet der Event Loop die Task Queue ab?
2. Warum kann laufender synchroner Code nie von einem Callback unterbrochen werden?
3. Was passiert mit wartenden Callbacks, während eine Endlosschleife läuft?
4. Ein async-Aufruf ohne await: Was landet in der Variablen?
5. Warum ist “Timer auf 0” keine Garantie für “sofort”?

Abgabe

Ausgefülltes Rätselblatt mit Vorhersagen und Erklärungen, die Modellskizze mit der schriftlichen Erklärung sowie Ihre zwei Rätsel samt Musterlösung und Tauschbewertung.