JavaScript-Programmierung von Kopf bis Fuß

408 Kapitel 9

Ein setTimeout-Handler

..., 6, 5, 4, 3, 2, 1, 0.

Wie setTimeout funktioniert

Das wollen wir uns noch mal Schritt für Schritt ansehen:

Beim Laden der Seite tun wir

zwei Dinge: Wir definieren einen

Handler namens timerHandler,

und wir rufen setTimeout auf,

um ein time-Event zu erzeugen,

das 5000 Millisekunden danach

ausgelöst wird. Wenn das time-

Event ausgelöst wird, wird der

Handler ausgeführt.

1

function timerHandler() {

alert("Warum starren Sie so lange auf einen leeren Bildschirm?");

}

Es geht los. Der Zähler läuft nach

5000 Millisekunden ab. Dann muss ich

den passenden Handler aufrufen.

Während der Countdown in

Millisekunden abläuft, macht

der Browser mit seinen

anderen Aufgaben weiter.

2

Wenn der Countdown 0 erreicht, wird der

Handler aufgerufen.

3

Das waren 5000

Millisekunden.

Der Countdown ist

abgelaufen, rufen wir

also den Handler auf.

Der Handler wurde

aufgerufen. Mit diesem

Timer bin ich fertig.

Der Handler wird aufgerufen, wodurch im

Browser eine Warnmeldung erzeugt und

ausgegeben wird.

4

5000, 4999, 4998 ...

Der Browser überwacht

alle Timer (ja, es kann

nicht nur einen geben)

sowie die aufzurufenden

Handler.

Das time-Event wird ausgelöst, sobald der Countdown

beendet ist. Der Browser führt den Event-Handler

aus, indem er die übergebene Funktion aufruft.

Wenn der Browser den Event-

Handler ausführt, wird die

Warnmeldung ausgegeben.

Ihr Browser

verwaltet die

Timer.

Sie sind hier � 409

Asynchron programmieren

Gut beobachtet! Wissen Sie noch, dass wir am Anfang des

Kapitels gesagt haben, Sie würden das Gefühl bekommen, Sie seien

nicht mehr in Kansas? Genau darum geht es in dem Film. Plötzlich

wird die zuvor schwarz-weiße Szenerie farbig. Zurück zu Ihrer

Frage: Ja, wir haben eine Funktion definiert und diese dann an

setTimeout übergeben (das eigentlich eine Methode ist).

Warum sollten wir das tun, und was hat das alles zu bedeuten? Eins

nach dem anderen: setTimeout erzeugt eine interne »Stoppuhr«

und verbindet sie mit einem Handler. Dieser wird aufgerufen,

sobald die Zeit abgelaufen ist. Damit setTimeout weiß, welcher

Handler aufgerufen werden soll, müssen wir ihr eine Referenz auf die

Handler-Funktion übergeben. setTimeout speichert diesen Handler

und benutzt ihn, wenn die angegebene Zeit verstrichen ist.

Wenn Sie jetzt sagen: »Ja, das erscheint sinnvoll.«, dann ist alles

wunderbar. Vielleicht fragen Sie sich aber auch: »Wie bitte? Eine

Funktion an eine Funktion übergeben? Wirklich?« In diesem Fall

haben Sie vermutlich Erfahrung mit einer Sprache wie C oder Java,

in der Sie nicht einfach mal eben eine Funktion an eine andere übergeben – in

JavaScript ist das dagegen ganz normal. Wie sich zeigt, kann das

äußerst praktisch sein, besonders wenn wir Code schreiben, der auf

Events reagieren soll.

Tatsächlich sagen Sie aber wohl: »Ich glaube, ich verstehe langsam,

bin mir aber noch nicht ganz sicher.« Keine Sorge. Im Moment

reicht es, wenn Sie wissen, dass wir setTimeout eine Referenz

auf den Handler übergeben, der aufgerufen wird, wenn der Timer

abgelaufen ist. Wir werden im nächsten Kapitel noch wesentlich

mehr über Funktionen reden (und was Sie damit alles anstellen

können). Lassen Sie sich im Moment einfach darauf ein.

Habe ich richtig gesehen,

oder haben Sie gerade eine

Funktion an eine andere Funktion

übergeben?

setTimeout(timerHandler, 5000);

Hier ist sie: eine Referenz auf eine Funktion, die an

setTimeout (auch eine Funktion) übergeben wurde.