Java Reference
In-Depth Information
}
window.onload = init;
Wir animieren die beiden Objekte mit vollkommen analogen Funktionen, die aber bewusst
nicht (!) synchronisiert werden. Das bedeutet, dass die Veränderung der Breite beider
Objekte explizit in unterschiedlichen Zeitintervallen erfolgt. Das Beispiel hat zwei struktu-
rell interessante Stellen. Mit
document.getElementById("ani1").style.width = i + "px";
und
document.getElementById("ani2").style.width = j + "px";
werden jeweils die
Breite des DIV-Containers und die Breite des Bildobjekts jeweils in Abhängigkeit von einer
globalen Zählvariable gesetzt. Dazu kommt das
style
-Objekt zum Einsatz, um darüber die
CSS-Eigenschaten zu manipulieren. Darauf werden wir noch genauer eingehen. Die zweite
interessante Stelle betrit unser Thema - der zeitverzögerte Selbstaufruf der Funktionen
animation1()
und
animation2()
. Die beiden Funktionen werden beim Laden der Webseite
unmittelbar mit der Funktion
init()
gestartet, die mit dem Eventhandler
window.onload
aufgerufen wird. Das bedeutet, dass die beiden Animationen unmittelbar (und endlos - also
bis zum Verlassen der Webseite) ablaufen.
8.9.3.10■Einen zeitverzögerten Aufruf anhalten
Der Rückgabewert von
setTimeout()
kann einer Variablen zugewiesen werden, die von
einer weiteren
window
-Methode mit Namen
clearTimeout()
zum Widerrufen einer verzö-
gerten Anweisung genutzt werden kann. Dazu übergibt man die Referenzvariable einfach
als Parameter.
Beispiel zum Anhalten eines zeitverzögerten Aufrufs
In dem Beispiel
(kap8_17.html)
wollen wir eine zeitverzögerte Weiterleitung zu einer neuen
Adresse abbrechen:
Listing 8.40■
Die Webseite mit zwei Buttons
...
<script type="text/javascript" src="lib/js/kap8_17.js"></script>
</head>
<body>
<h3>Eine zeitverzögerte Weiterleitung</h3>
<button>Starte Weiterleitung</button><button>Stoppe Aufruf</button>
</body>
</html>
Sie haben eine Webseite mit zwei Schaltlächen. Mit dem Klick auf die erste Schaltläche
wird die Funktion
weiter()
aufgerufen. Diese leitet den Besucher nach einem Klick auf den
Hyperlink nach einer Zeitspanne von zwei Sekunden auf eine andere Seite weiter. In der
externen JavaScript-Datei
kap8_17.js
ist die Funktion deiniert, ebenso die Funktion
stop()
,
die mit der zweiten Schaltläche aufgerufen werden soll und die Weiterleitung stoppt:
Listing 8.41■
Abfangen der Aktion, die mit setTimeout() aufgerufen wurde
var aufruf;
function weiter() {
aufruf = setTimeout('location.href="http://blog.rjs.de"', 2000);
}
Search WWH ::
Custom Search