vorige Präsentation: Speichern im Browser | zurück zum Buch-Kapitel [esc] | Nächste Präsentation CORS
Wie kann man in Javascript mit der Zeit arbeiten? Eine Uhr bauen? Die Zeit stoppen?
Dafür lernen wir nun zwei Methoden kennen.
Die Metode setTimeout gehört zum window Objekt im Browser.
Mit dieser Methode kann man einen Funktionsaufruf “in die Zukunft” schicken:
function later () {
console.log("this will happen in 1 second.");
}
setTimeout(later, 1000);
Das erste Argument ist eine Funktion, die in der Zukunft aufgerufen werden soll. Das zweite Argument gibt die Zeit in Millisekunden an.
Man kann die Funktion auch als Arrow-Function schreiben:
setTimeout(() => {
console.log("this will happen in 1 second.");
}, 1000);
Mit der setTimout Methode lernen wir die erste
asynchrone Methode kennen.
Bei allen anderen Funktionen war es immer so, dass erst nachdem die Methode ihre Arbeit beendet hat der nächste Befehl ausgeführt wird:
function now () {
console.log("2");
}
console.log("1");
now();
console.log("3");
Deswegen ist der Output hier 1, 2, 3.
Da setTimout asynchron arbeitet, ist die
Reihenfolge hier anders:
function later () {
console.log("2? will happen in 1 second.");
}
console.log("1");
setTimeout(later, 1000);
console.log("3");
Der Output ist 1, 3. Und sehr viel später dann: 2? will happen in 1 second.
Wenn man den timer nicht mehr braucht, kann man ihn
mit clearTimeout wieder löschen:
function later () {
console.log("will happen in 1 second.");
}
let t = setTimeout(later, 1000);
clearTimeout(t);
Hier wird es nie zu dem Output kommen.
Mit der Methode setInterval können wir eine Funktion
wiederholt aufrufen lassen:
function again () {
console.log("another second is over.");
}
setInterval(again, 1000);
Genau wie bei setTimeout und clearTimeout
gibt es zu setInterval ein clearInterval:
let counter = 0;
let i;
function again () {
counter++;
console.log(counter, " seconds");
if (counter > 10) clearInterval(i);
}
i = setInterval(again, 1000);
Ein wichtiges Prinzip on Javascript ist:
Ein laufendes Javascript-Programm wird niemals unterbrochen.
Erst wenn das aktuelle Programm beendet ist
kann eine Callback-Funktion aufgerufen werden, die wir mit setTimeout oder setInterval geplant haben.
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: Variante B:
tick tick
0 Sekunden später? tock
tock tick
tick tock
tock 0 Sekunden später?
Die Antwort ist: das Javascript-Programm wird nicht unterbrochen, sondern 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
/
#