JavaScript-Programmierung von Kopf bis Fuß

Sie sind hier � 407

Asynchron programmieren

Noch mehr Events

Bisher kennen Sie drei Arten von Events: das load-Event, das ausgelöst wird, wenn der

Browser die Seite geladen hat, das click-Event, das auftritt, wenn ein Element angeklickt

wird, und das mousemove-Event, das stattfindet, wenn der Benutzer die Maus über ein

Element bewegt. Ihnen werden wahrscheinlich noch viele andere Events begegnen,

beispielsweise wenn Daten über das Netzwerk hereinkommen, Events zum geografischen

Ort des Browsers und zeitbasierte Events (um nur ein paar zu nennen).

Um für die bekannten Events einen Handler einzurichten, haben Sie den Handler

einer bestimmten Eigenschaft zugewiesen, wie onload, onmouseover oder onclick.

Aber nicht alle Events funktionieren so. Bei zeitbasierten Events weisen Sie den

Handler beispielsweise keiner Eigenschaft zu, sondern rufen stattdessen eine Funktion,

setTimeout, auf und übergeben ihr den Handler.

Hier ein Beispiel: Angenommen, Ihr Code soll fünf Sekunden warten, bevor er etwas tut.

Dann könnten Sie dafür setTimeout und einen Handler benutzen, wie hier gezeigt:

function timerHandler() {

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

}

setTimeout(timerHandler, 5000);

Zuerst schreiben wir einen Event-

Handler, der aufgerufen wird, wenn

die Zeit abgelaufen ist.

In diesem Event-Handler geben wir einfach eine Warnmeldung aus.

Und hier rufen wir setTimeout auf und übergeben zwei

Argumente: den Event-Handler und die Dauer (in Millisekunden).

Die Verwendung

von setTimeout

funktioniert so ähnlich

wie die Bedienung

einer Stoppuhr.

Probelauf für den Timer

Sitzen Sie nicht einfach herum! Es ist Zeit, diesen Code zu testen! Packen Sie ihn

in eine einfache HTML-Seite und laden Sie diese in Ihren Browser. Zuerst sehen

Sie nichts, aber nach fünf Sekunden wird die Warnmeldung ausgegeben.

Seien Sie geduldig! Warten Sie fünf Sekunden,

um zu sehen, was wir sehen. Warten Sie schon

ein paar Minuten, geben Sie Ihrem Rechnern

einen kleinen Tritt … nicht im Ernst. Besser,

Sie überprüfen Ihren Code.

Hier weisen wir den

Timer an, 5000 Milli-

sekunden (5 Sekunden)

zu warten.

Dann wird der

Handler timerHandler

aufgerufen.

Wie würden Sie dafür

sorgen, dass die

Warnmeldung alle fünf

Sekunden ausgegeben

wird?

Kopf-

nuss