JavaScript setTimeout Methode

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.

JavaScript setTimeout Beispiel 1: DIV-Fenster zeitverzögert anzeigen

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>



¬ Insolvenzrecht