Die Methode setTimeout des Window-Objekts führt eine JavaScript-Anweisung nach einer angegebenen Verzögerungszeit aus. Im Gegensatz zu setInterval – die Anweisung wird mit Hilfe dieses Befehls immer wieder in einem festgelegten Rhythmus ausgeführt – wird die angegebene Anweisung lediglich ein einziges mal ausgeführt. Beim Aufruf der Methode werden zwei Parameter übergeben. Der erste Parameter gibt die auszuführende Javascript-Anweisung an. Als zweiter Parameter wird die Zeit (in Millisekunden) angegeben, die verstreichen muss bis die vorgegebene Anweisung ausgeführt wird. Der von dieser Methode gelieferte Rückgabewert ist eine ID, mit deren Hilfe die zeitverzögerte Ausführung der JavaScript-Anweisung gestoppt werden kann. Zu diesem Zweck muss die Methode clearTimeout mit der von setTimeout gelieferten ID als Parameter aufgerufen werden.
Im folgenden Beispiel wird ein DIV-Fenster (PopUp-Fenster) mit einer zeitlichen Verzögerung von drei Sekunden angezeigt. Das DIV-Fenster wird samt Formatierung per StyleSheets dynamisch mit Hilfe des JavaScript-Codes erstellt. Die im unteren Beispiel-Code definierte Funktion showFrame generiert das DIV-Fenster und hängt es in den HTML-Code ein.
In der Funktion showFrame wird zunächst per createElement ein DIV-Element – definiert in HTML einen allgemeinen Darstellungsbereich – erzeugt. Dieses DIV-Element stellt den Fenster-Container dar, in dem die Informationen dargestellt werden sollen. Das danach erzeugte H1-Element (HTML-Code zur Definition einer Überschrift) soll später die Überschrift enthalten. Nun folgt die Erzeugung eines Textknotens mit der Methode createTextNode, der direkt – durch Zuweisung einer Zeichenkette – mit „Inhalt” gefüllt wird. Dieser Textknoten wird dann mit Hilfe der Methode appendChild an das H1-Element und das H1-Element in Folge an den Fenster-Container angehängt.
Als nächstes wird ein Textabsatz (in HTML durch ein P-Element beschrieben) erzeugt, der ebenfalls mit in einem Textknoten gespeichertem Text gefüllt wird. Danach wird, wie zuvor bei der Überschrift, der Textknoten an das P-Element und dann das P-Element an den DIV-Container angehängt.
Jetzt folgen die Anweisungen zur Festlegung des Layouts der drei zuvor erzeugten HTML-Elemente. Der Zugriff auf die Styles der einzelnen Elemente erfolgt über die Style-Attribute der jeweiligen Elemente (df - DIV-Element, dh - H1-Element und de - P-Element).
Die letzte Zeile innerhalb der Funktionsdefinition hängt das dynamisch erzeugte DIV-Fenster innerhalb des Body-Bereichs der Seite ein. Am Ende des Scripts wird mit dem Aufruf von setTimeout die Funktion showFrame nach Ablauf von 3 Sekunden (3*1000 Millisekunden) ausgeführt. Dieser Aufruf erfolgt unmittelbar nach dem Laden der Seite. Auf der setTimeout Demo-Seite können Sie das vom folgenden Script generierte DIV-Fenster anschauen.
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
function showFrame () {
// Div zur Darstellung eines Fensters erzeugen
df = document.createElement ('div');
// Überschrift-Element erzeugen
dh = document.createElement ('h1');
// Textknoten für die Überschrift erzeugen
dt = document.createTextNode ('Inhalt');
// in das h1-Tag...
dh.appendChild (dt);
// und dann in das div-Element einfügen
df.appendChild (dh);
// Textabsatz (p-Tag) für den Inhalt erzeugen
de = document.createElement ('p');
// Textknoten mit dem Inhalt des Absatzes erzeugen
inhalt = 'Hier steht etwas drin! ' +
'Es handelt sich um einen etwas laengeren ' +
'Text, der keine besondere Bedeutung hat.';
dt = document.createTextNode (inhalt);
// und in das Div einfügen
de.appendChild (dt);
df.appendChild (de);
// Styles für den Div
df.style.position = 'absolute';
df.style.top = '6em';
df.style.left = '22em';
df.style.width = '11em';
df.style.border = '1px solid black';
df.style.padding = '10px';
df.style.backgroundColor = '#eee';
df.style.color = '#a00';
// Styles für die Überschrift
dh.style.margin = '0';
dh.style.fontSize = '1.3em';
dh.style.textDecoration = 'underline';
dh.style.backgroundColor = '#eda';
// Styles für den Textabsatz
de.style.color = '#00a';
de.style.margin = '0';
de.style.backgroundColor = '#ade';
de.style.textAlign = 'justify';
// Div samt Inhalt in das HTML-Dokument einfügen
document.getElementsByTagName ('body')[0].appendChild (df);
}
// Fenster nach Ablauf von 3 Sekunden anzeigen
window.setTimeout ('showFrame ()', 3 * 1000);
// -->
</script>
¬ Menu
¬ Gratis Download
¬ Seminare
¬ Yoga
¬ Insolvenzrecht
¬ News
15.08.2008Schleifen in PHP: Die While-Schleife » mehr 13.08.2008Nutzung von Variablen unter PHP: Definition, Sichtbarkeit und vordefinierte Variablen » mehr 11.08.2008Ausgabe von Datum und Zeit mit PHP nach Konvertierung in ein String » mehr Eine vollständige News-Liste ist auf der News-Seite zugänglich.
¬ Foren
¬ Buchtipp
Ajax in action
Weitere JavaScript Literaturtipps finden Sie unter JavaScript Bücher
Webdesign •
Beratung Internetseite •
Programmierung Internetseite