Was zuerst läuft

setTimeout() hält das Programm nicht an. Es setzt nur den Timer und übergibt ihm die Funktion, und das Skript macht sofort mit der nächsten Zeile weiter. Was wird hier wohl ausgegeben?

console.log("Das Wasser kocht.");

setTimeout(function () {
    console.log("Der Tee ist fertig!");
}, 3000);

console.log("Warte auf den Tee…");

Das Wasser kocht.
Warte auf den Tee…
Der Tee ist fertig!

Die letzte Zeile erscheint drei Sekunden nach den anderen beiden. JavaScript führt das erste console.log() aus, setzt den Timer und führt sofort das zweite console.log() aus. Erst wenn die drei Sekunden um sind, ruft der Browser die Funktion des Timers auf. Selbst bei 0 Millisekunden wäre es genauso: Die Funktion eines Timers läuft erst, nachdem der Code, der gerade läuft, zu Ende ist.

Alles, was nach dem Warten passieren soll, muss also in der Funktion des Timers stehen. Zeilen unter setTimeout() laufen sofort:

setTimeout(function () {
    statusText.textContent = "Der Tee ist fertig!";
}, 3000);
statusText.textContent = "Genieße!"; // Läuft sofort, nicht erst nach 3 Sekunden

Diese Seite sagt zuerst Genieße!, und Der Tee ist fertig! erscheint 3 Sekunden später.

In dieser Übung verwendest du auch die Eigenschaft disabled eines Buttons. Nach button.disabled = true; wird der Button grau, und ein Klick darauf bewirkt nichts; mit button.disabled = false; funktioniert er wieder. Das ist praktisch, wenn eine Seite auf etwas wartet, damit niemand dasselbe zweimal startet.