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>

Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht