Zeitsteuerung
Der Kessel ist ein Absatz, #pot. Das Skript schreibt cold hinein. Hier ist kein Formular und keine Ladenglocke.
Ein Timer hält das Skript nicht an. Die nächste Zeile läuft sofort. Der Rückruf läuft später. Eine Frist von 400 Millisekunden schreibt hot. Bricht man sie ab, bleibt der Kessel cold. Ein Intervall zählt 1, 2, 3 und stoppt. Die Zeile lautet cold / hot / 3.
Nicht die Glocke
Die vorige Seite setzte same / 4 / undefined / number zusammen. Das waren Dokument, ein var, ein let und der Typ der Breite. Diese Seite liest das nicht. cold und hot sind Wörter, die der Timer auf den Kessel schreibt.
Die neue Frage: wann wechselt das Wort?
Die nächste Zeile wartet nicht
setTimeout will eine Funktion und eine Verzögerung in Millisekunden. 400 sind vier Zehntel einer Sekunde, nicht 400 Sekunden. Das Log unter dem Aufruf läuft zuerst, der Kessel ist noch cold. Der Rückruf schreibt hot und loggt das später.
let pot = document.getElementById("pot");
pot.textContent = "cold";
setTimeout(function () {
pot.textContent = "hot";
console.log(pot.textContent);
}, 400);
console.log(pot.textContent);
Das erste Log ist cold. Das spätere ist hot. Das Skript saß nicht 400 Millisekunden still.
Das Kochen abbrechen
setTimeout gibt eine Kennung zurück. clearTimeout mit dieser Kennung verwirft den Rückruf. Der Kessel stand auf cold, und hot kommt nie.
let pot = document.getElementById("pot");
pot.textContent = "cold";
let boil = setTimeout(function () {
pot.textContent = "hot";
}, 400);
clearTimeout(boil);
console.log(pot.textContent);
Das Log ist cold. Der Rückruf wurde verworfen, also wird der Kessel nicht hot.
Drei Eingüsse zählen
setInterval ruft die Funktion immer wieder, hier alle 300 Millisekunden. Jeder Aufruf addiert eins. Bei 3 stoppt clearInterval. Das Log ist diese 3, kein endloses Steigen.
let pot = document.getElementById("pot");
let n = 0;
let tick = setInterval(function () {
n = n + 1;
pot.textContent = String(n);
if (n === 3) {
clearInterval(tick);
console.log(pot.textContent);
}
}, 300);
Das Log ist 3. Die Intervall-Kennung ist tick. Ohne clearInterval würde die Zahl weiter steigen.
Die Kennung ist eine Zahl
Der Wert von setTimeout ist eine Zahl. Nicht die Verzögerung und nicht das Wort hot. Dieses Stück plant einen leeren Rückruf nur, um den Typ zu lesen, und bricht ihn dann ab.
let boil = setTimeout(function () {}, 400);
console.log(typeof boil);
clearTimeout(boil);
Das Log ist number.
Null ist trotzdem später
Eine Verzögerung von 0 heißt nicht „vor der nächsten Zeile“. Der Rückruf wartet, bis dieses Skript fertig ist. Der Kessel wird now, dieses Wort wird geloggt, und erst dann loggt der Rückruf later.
let pot = document.getElementById("pot");
pot.textContent = "now";
setTimeout(function () {
console.log("later");
}, 0);
console.log(pot.textContent);
Das erste Log ist now. Das zweite ist later. Die Null hat die Schlange nicht übersprungen.
Was eine Verzögerung bedeutet
Die Einheit ist Millisekunden. Die Kesselzeile ist die, die diese Seite benutzt.
📊 Was eine Verzögerung bedeutet
| Verzögerung | Sie bedeutet | Leicht zu verwechseln |
|---|---|---|
| 0 | nachdem dieses Skript fertig ist | vor der nächsten Zeile |
| 400 | 0,4 Sekunden | 400 Sekunden |
| 1000 | eine Sekunde | eine Minute |
Die Zeile unter dem Kessel
Das Skript schreibt cold und speichert das Wort sofort. Die Frist von 400 Millisekunden speichert hot. Das Intervall addiert alle 300 Millisekunden eins, stoppt bei 3 und fügt dann die drei Wörter zusammen. hot wird vor dem dritten Einguss gespeichert, weil 400 kleiner ist als 900.
<!DOCTYPE html>
<html>
<head>
<title>kettle-timer — page</title>
</head>
<body>
<p id="pot">blank</p>
<p id="line">…</p>
<script>
let pot = document.getElementById("pot");
let seen = [];
pot.textContent = "cold";
seen.push(pot.textContent);
setTimeout(function () {
pot.textContent = "hot";
seen.push("hot");
}, 400);
let n = 0;
let tick = setInterval(function () {
n = n + 1;
if (n === 3) {
clearInterval(tick);
seen.push(String(n));
document.getElementById("line").textContent = seen.join(" / ");
}
}, 300);
</script>
</body>
</html>
Die Zeile lautet cold / hot / 3. Cold war sofort da. Hot kam von der Frist. 3 kam vom Intervall. Das Wort blank ist weg. same / 4 / undefined / number ist die vorige Seite.
An der Theke
- Setze den Kessel auf cold, plane hot für 400 Millisekunden und logge sofort. Das erste Log ist cold. Das spätere ist hot.
- Plane hot und rufe vorher
clearTimeoutauf. Das Log bleibt cold. - Zähle mit
setIntervalund stoppe bei 3. Das Log ist 3. - Lies
typeofder Kennung. Das Log ist number. - Nimm eine Verzögerung von 0. Die Logs sind now, dann later.
- Lies die Zeile der Seite: cold / hot / 3.
Fehler an der Theke
Der Kessel zeigt cold, hot oder eine Zahl. Nicht die Zeile der Glocke.
- Erwarten, dass das erste Log hot ist
clearTimeoutvergessen, sodass ein Abbruch, den du wolltest, doch hot schreibt- Das Intervall über 3 hinauslaufen lassen
- 400 als 400 Sekunden lesen
- Eine Verzögerung von 0 als „vor der nächsten Zeile“ nehmen
- Die Zeile als same / 4 / undefined / number lesen
Das behalten
- Die nächste Zeile läuft vor dem Timeout-Rückruf
clearTimeoutverwirft diesen Rückruf, der Kessel bleibt coldclearIntervalstoppt die Zahl bei 3- Die Kennung von
setTimeoutist eine Zahl - Eine Verzögerung von 0 loggt trotzdem now vor later
- Die Zeile der Seite lautet cold / hot / 3
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt