vorige Präsentation: Speichern im Browser | zurück zum Buch-Kapitel [esc] | Nächste Präsentation CORS
Bei der Vorstellung der asynchronen Funktionen haben wir gelernt: Ein laufendes Javascript-Programm wird niemals unterbrochen. Erst wenn das aktuelle Programm beendet ist wird eine Callback-Funktion aufgerufen.
Diese Prinzip kann man am Beispiel von setTimeout besonders gut sehen.
Mit setTimeout kann man eine Funktion später (Angabe in Millisekunden)
ausführen lassen:
function later() {
console.log("3 Sekunden später", Date.now());
}
console.log("tick", Date.now());
setTimeout(later, 3000);
console.log("tock", Date.now());
console.log("tick", Date.now());
console.log("tock", Date.now());
(Programm in die Konsole kopieren und ausprobieren!)
Was passiert, wenn man den Timeout auf 0 setzt?
function later() {
console.log("0 Sekunden später?", Date.now());
}
console.log("tick", Date.now());
setTimeout(later, 0);
console.log("tock", Date.now());
console.log("tick", Date.now());
console.log("tock", Date.now());
Zwei Ergebnisse wären möglich:
Variante A: passiert sofort tick 0 Sekunden später? tock tick tock
Variante B: Programm läuft durch bis zum Ende tick tock tick tock 0 Sekunden später?
Die Antwort ist: das Javascript-Programm wird nicht unterbrochen, sonder läuft bis zum Ende durch. Hier nochmal mit mehr Ausgaben:
function later() {
console.log("NICHT 0 Sekunden später!", Date.now());
}
console.log("tick", Date.now());
setTimeout(later, 0);
console.log("tock", Date.now());
console.log("tick", Date.now());
console.log("tock", Date.now());
// Output in der Konsole:
// tick 1588059630667
// tock 1588059630668
// tick 1588059630668
// tock 1588059630668
// nicht 0 Sekunden später 1588059630669
Es gibt drei Befehle in diesem Bereich:
Ungefähr nach x Sekunden eine Funktion starten: setTimeout
Ungefähr alle x Sekunden eine Funktion starten: setInterval
Ungefähr für jeden Frame einmal eine Funktion starten: requestAnimationFrame
vorige Präsentation: Speichern im Browser | zurück zum Buch-Kapitel [esc] | Nächste Präsentation CORS
/
#