[JavaScript] Text zeichenweise erscheinen lassen

**CaptainAlphabet** · 09-08-2007, 16:01

Hallo!

In dem nachfolgenden HTML-Code wird beim Laden der Seite die JavaScript-Funktion appear('greeting') aufgerufen. Der angegebene Parameter "greeting" bezeichnet die ID einer Überschrift ersten Grades.

Die Funktion speichert den Text dieses H1-Elements in der Variable "Text" und entfernt anschließend den Text innerhalb des H1-Elements.

Nun wird eine for-Schleife, beginnend bei 0, so oft durchlaufen, bis die Zählervariable den Wert der Textlänge erreicht hat.

Bei jedem Schleifendurchlauf nimmt die Variable "Letter" ein Zeichen des Textes von der Position entsprechend der Zählervariable an und soll mit einer Verzögerung von 100 ms wieder in das H1-Element geschrieben werden.

Die Funktion an sich funktioniert, solange man die Methode window.setTimeout() weglässt. Natürlich werden dann alle Zeichen unmittelbar in das H1-Element geschrieben. Verwende ich aber den Timeout, wird gar kein Text in das H1-Element geschrieben.

Meine Frage lautet also: Was mache ich falsch? Ich hoffe, ihr könnt mir da weiterhelfen.

PHP-Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Text zeichenweise erscheinen lassen</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="Content-Style-Type" content="text/css"/>
    <meta http-equiv="Content-Script-Type" content="text/javascript"/>
    
    <script type="text/javascript">
      //<![CDATA[
        function appear(Id)
        {
          var Text = document.getElementById(Id).firstChild.data;
          document.getElementById(Id).firstChild.deleteData(0, Text.length);
          
          for (i = 0; i < Text.length; i++)
          {
            var Letter = Text.substring(i, i+1);
            window.setTimeout('document.getElementById(' + Id + ').firstChild.appendData(' + Letter + ')', 100);
          }
        }
      //]]>
    </script>
  </head>
  <body onload="appear('greeting');">
    <h1 id="greeting">Willkommen aus dieser Website!</h1>
    <p>Hier steht der Seiteninhalt...</p>
  </body>
</html>

Gruß

CaptainAlphabet

**jan61** · 09-08-2007, 23:13

Moin,

so wie ich http://de.selfhtml.org/javascript/ob...tm#set_timeout verstanden habe, erwartet setTimeout() eine Java-Script-Funktion, keine Methode eines DOM-Objekts.

Versuchs mal so:

PHP-Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Text zeichenweise erscheinen lassen</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="Content-Style-Type" content="text/css"/>
    <meta http-equiv="Content-Script-Type" content="text/javascript"/>

    <script type="text/javascript">
      //<![CDATA[
        function appear(Id, Text, idx)
        {
          if (idx == 0) {
            Text = document.getElementById(Id).firstChild.data;
            document.getElementById(Id).firstChild.deleteData(0, Text.length);
          }

          if (idx < Text.length)
          {
            var Letter = Text.substring(idx, idx+1);
            document.getElementById(Id).firstChild.appendData(Letter);
            idx ++;
            window.setTimeout("appear('" + Id + "','" + Text + "'," + idx + ")", 100);
          }
        }
      //]]>
    </script>
  </head>
  <body onload="appear('greeting', '', 0);">
    <h1 id="greeting">Willkommen auf dieser Website!</h1>
    <p>Hier steht der Seiteninhalt...</p>
  </body>
</html>

Jan

**BlueJay** · 10-08-2007, 15:36

dem setTimeout sollte es egal sein, ob Javascript oder das DOM die Methode bereitstellt.

Aber das mit der Loop sollte anders ablaufen, als sich Captain Analphabet das vorgestellt hat. Mit der for-Schleife wird er kein Glück haben, er startet gleichzeitig etlich Timeouts, und die schlagen dann natürlich alle zur gleichen Zeit zu.

Besser wäre eine Art Konstrukt, das rekursiv nach Ausgabe eines Buchstabens einen neuen Timeout startet. Da die meisten Browser Bildschirmausgaben sammeln, bevor sie zuschlagen, müsste er sogar für jeden Durchlauf der Ausgabe die Methode einzeln starten. Dann sollten die Buchstaben wie gewünscht "dröppeln".

so long,
BlueJay

**jan61** · 10-08-2007, 21:37

Zitat von BlueJay

...Besser wäre eine Art Konstrukt, das rekursiv nach Ausgabe eines Buchstabens einen neuen Timeout startet. Da die meisten Browser Bildschirmausgaben sammeln, bevor sie zuschlagen, müsste er sogar für jeden Durchlauf der Ausgabe die Methode einzeln starten. Dann sollten die Buchstaben wie gewünscht "dröppeln".

Genau das mache ich in meinem Beispiel ;-)

Jan