jQuery von Kopf bis Fuß (German Edition)

Browser. Danach öffnen Sie einen zweiten Tab und spielen ein wenig herum, indem Sie zwischen den beiden Fenstern hin- und herklicken.
    Probefahrt
    Wenn Sie die Datei fenster_tester.html und einen zweiten Tab öffnen und zwischen beiden hin- und herwechseln, sieht die Darstellung ungefähr so aus wie unten.

    Mit den Informationen des
window
-Objekts können Sie die Blitze stoppen, wenn der Besucher sich vom Monstermacher-Fenster wegbewegt. Kehrt er zur Applikation zurück, können die Blitze wieder gestartet werden.
    jQuery-Magneten
    Bringen Sie die Codemagneten in die richtige Reihenfolge, um den Event-Handlern die passenden Funktionsdefinitionen zuzuweisen. Eine Funktion hält die Blitze an, wenn das Fenster den Fokus verliert (nennen Sie diese Funktion
blitze_anhalten
). Die andere Funktion startet die Blitzanimation wieder, sobald das Monstermacher-Fenster den Fokus zurückerhält (nennen Sie diese Funktion
blitze_starten
). Sie brauchen den Code für die Funktionen jetzt noch nicht zu schreiben. Platzieren Sie stattdessen einfach die passenden Kommentarmagneten (// und so weiter) innerhalb der beiden Funktionen.
    jQuery-Magneten: Lösung
    Und damit sind die Funktionsdeklarationen für die Event-Handler des
window
-Objekts fertig.

    Richtig, die Fuktionen machen nichts ... jedenfalls noch nicht.
    Anstatt hier einfach nur Ihren alten Code hineinzukopieren, wollen wir uns eine Methode des
window
-Objekts genauer ansehen: eine Timer-Methode, mit der sich die Blitzeffekte besser steuern lassen.

Timer-Methoden sagen Ihren Funktionen, wann sie ausgeführt werden sollen
    Sowohl JavaScript als auch jQuery besitzen Timer-Methoden, mit denen Sie Funktionen zeitgesteuert ablaufen lassen können. Das
window
-Objekt von JavaScript besitzt allein vier Timer-Methoden:
setTimeout
,
clearTimeout
,
setInterval
und
clearInterval
. Zusätzlich bietet uns jQuery noch die
delay
-Methode. Lassen Sie uns diese Methoden etwas genauer betrachten.

    Spitzen Sie Ihren Bleistift
    Welche dieser Timer-Methoden funktioniert am besten, um die
blitze_starten-
Funktion anzupassen? Beantworten Sie für jede Timer-Methode, ob sis uns hilft und erklären Sie, warum Sie sich für oder gegen diese Methode entschieden haben.
    Timer
Verwenden?
Warum?
setTimeout
 
 
setInterval
 
 
delay
 
 
    Spitzen Sie Ihren Bleistift: Lösung
    Welche dieser Timer-Methoden funktioniert am besten, um die
blitze_starten
-Funktion anzupassen? Hier sind unsere Antworten.
    Timer
Verwenden?
Warum?
setTimeout
Nein
Die Methode setTimeout ist für Situationen gedacht, in denen eine Funktion einmalig mit einer bestimmten Verzögerung ausgesführt werden soll.
setInterval
Ja
Die Methode setInterval ist speziell für Situationen gedacht, in denen eine Funktion zeitgesteuert wiederholt werden soll. Genau das soll mit unseren Blitzen passieren.
delay
Nein
Die delay-Methode funktioniert gut für Effekte, die nacheinander mit einer gewissen Verzögerung ausgeführt werden sollen. Sie hat aber keine Möglichkeit, die Funktionen zu wiederholen.

    Sehr gute Frage!
    Ja, Sie können die
clearInterval
-Methode verwenden, um die mit
setInterval
erstellten wiederholten Funktionsaufrufe wieder anzuhalten. Dafür müssen Sie
clearInterval
als Parameter eine Variable übergeben. Hier sehen Sie, wie das funktioniert:

    Es gibt keine: Dummen Fragen
    F:
F: Funktioniert die
setTimeout
-Methode in allen Browsern gleich?
A:
A: Nein. Mozilla Firefox und Google Chrome zeigen das oben besprochene Verhalten (die Funktionsaufrufe werden »aufbewahrt«, bis das Fenster wieder den Fokus erhält). Internet Explorer 9 ruft die Funktion auf, wie es in Kapitel 5 vorgesehen war. Nicht nur Webdesigner haben also Probleme mit der browserübergreifenden Kompatibilität.
F:
F: Können Timing-Funktionen wie
setInterval
und
setTimeout
nur mit dem
window
-Objekt benutzt werden?
A:
A: Das ist eine gute Frage. Leider funktionieren die Methoden tatsächlich nur mit dem
window
-Objekt. Immerhin können Sie das Präfix »window« weglassen und der Browser erkennt, wie die Methoden am aktuellen
window
-Objekt aufgerufen werden sollen. Allerdings gilt es als gute Angewohnheit, das Präfix mit anzugeben.
    Wer Macht Was?
    Verbinden Sie die verschiedenen Timer-Methoden mit der passenden Beschreibung.
    window.clearInterval(int1);
Reagiert, wenn das aktuelle Fenster den Fokus erhält, und ruft die
blitze_starten
-Methode auf.
window.onfocus = blitze_starten;

setTimeout(aufwachen(),4000);
Legt fest, dass