Unterschied setTimeout() setInterval @ tutorials.de: Tutorials, Forum & Hilfe

FipsTheThief · 13.05.06 12:59

Also ich probiere eben ein wenig in javaScript rum , und komme nicht so recht dahinter wo der Unterschied zwischen setTimeout und setInterval ist. Beide Funktionen sind ja ähnlich .
setInterval ruft halt eine Funktion immer nach einer gewissen Zeit auf und setTimeout macht das gleiche eigentlich dachte ich.

Nur habe ich nun 2 Beispiele hier die mich verwundern. Dieses erste läuft nur mit setTimeout richtig.
Entschuldigt hier den PHP , HTML JavasScript mix.

HTML-Code:

<html>
    <head>
        <script type="text/javascript">
            var Images = new Array();
            var actuallyImage = 0;
        
            function switchImage(){
                document.getElementById("bild").src = Images[actuallyImage].src;
                actuallyImage++;
                
                // ist das letzte Bild bereits erreicht 
                // dann beginnen wir von vorne
                if(actuallyImage >= Images.length){
                    actuallyImage = 0;
                }
                
                // 5 sek warten bis zum nächsten Bild
                setTimeout("switchImage()",10000);                
            }
        
            function loadImages(file){
                // bilder laden und die Obkelte alle in ein Array speichern
                imgNumber = Images.length;    
                Images[imgNumber] = new Image();
                Images[imgNumber].src = "Images/"+file;
            }
        </script>
    </head>
    <body onload="switchImage()">
        <script type="text/javascript">
        <?php
            /**
              PHP Script um die Bilder vorzuladen 
            **/
            
            // erlaubte Bildtypen festlegen
            $trustedImages = Array("image/jpg","image/jpeg","image/gif","image/png");
        
            // Bilder einladen nun einmal
            // lustiger mix PHP und HTML und JS in einer Datei ;) 
            $imageDir = "Images";
            
            // verzeichniss öffnen 
            $fileStream = opendir($imageDir);
            
            //verzeichniss durchlaufen
            while($file = readdir($fileStream) ){
            
                // nur datein einlesen 
                if($file != "." && $file != ".." && is_file("Images/".$file)){
                
                    // wir nehmen nur ausgewählte Datein des Types jpg jpeg  gif oder png
                    $mimeType = getimagesize("Images/".$file);
                    if(in_array($mimeType['mime'],$trustedImages)){
                        // nun laden wir die Bilder im JavaScript vor
                        echo "loadImages('".$file."');";
                    }
                }
            }
        ?>
        </script>
        <div align="center">
            <!-- Grundfäche //-->
            <div  style="height:400px;width:400px;">
                <img src="bild.jpg" id="bild" alt="lade Bilder">
            </div>            
        
        </div>
    </body>
</html>

Das zweite ist eine kleine Animation gewesen mit 3 Fischen welche nur mit setInterval richtig läuft aber nicht mit setTimeout.

HTML-Code:

<html>
    <head>
        <style type="text/css">
            #Aquarium{
                position:absolute;
                width:450px;
                height:150px;
                background-color:#0000FF;
            }
        </style>

        <script type="text/javaScript">
            
            var id;
            var richtung;
            
            function swim(){
                this.Value = parseInt(document.getElementById(this.id).style.left) ;
                if(this.Value < 400 && this.richtung== 'left'){
                    this.Value += 1;
                    this.richtung = "left";
                }else{
                    this.Value -= 1;
                    this.richtung = "right";
                }
                
                if(this.Value < 0){
                    this.richtung = 'left';
                }
                document.getElementById(this.id).style.left = this.Value;
            }
            
            function fish(id){
                this.id = id;
                this.richtung = 'left';
                this.swim = swim;
            }
        </script>
    </head>
    <body>
        <!-- Auqium festlegen //--->
        <div id="Aquarium">
        
            <div id="fisch1" style="position:absolute;left:200px;bottom:15px;">
                <img src="fisch.gif" alt="fisch">
            </div>
            <div id="fisch2" style="position:absolute;left:300px;bottom:20px;">
                <img src="fisch2.gif" alt="fisch">
            </div>
            <div id="fisch3" style="position:absolute;left:10px;bottom:30px;">
                <img src="fisch3.gif" alt="fisch">
            </div>
        </div>
        <div style="position:relative">
            <h1>AQUARIUM DES TODES </h1>
        </div>
        <script type="text/javascript">
            var Fish  = new fish("fisch1");
            var Fish2 = new fish("fisch2");
            var Fish3 = new fish("fisch3");
            
            // setTimeout ging hier nun nicht
            setInterval('Fish.swim()',30);
            setInterval('Fish2.swim()',35);
            setInterval('Fish3.swim()',40);
        
        </script>
    </body>
</html>

Mhm warum ist das so ?

D@nger · 13.05.06 14:22

Hallo, also settimeout ruft die Funktion nur einmal auf und setinterval in einem bestimmten Abstand immer wieder.

FipsTheThief · 13.05.06 14:50

Zitat von D@nger

Hallo, also settimeout ruft die Funktion nur einmal auf und setinterval in einem bestimmten Abstand immer wieder.

Achso also wäre es ratsam nur innerhalb der Funktion setTimeout zu verwenden und nicht setInterval da dieses wohl zu einen Überlauf führt sonst. Und ausserhalb der Funktionen nur setInterval.
Das leuchtet mir ein

Danke Dir dafür.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

AIR, Javascript, setTimeout/setInterval

setInterval -> aushebeln

setInterval

setInterval, setTimeout / XHTML probleme

Ausgabe eines Countdown mit setInterval() oder setTimeout()

E-Mail:

Abonnieren Abbestellen