FipsTheThief
Erfahrenes Mitglied
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.
Das zweite ist eine kleine Animation gewesen mit 3 Fischen welche nur mit setInterval richtig läuft aber nicht mit setTimeout.
Mhm warum ist das so ?
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:
<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:
<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 ?
Danke Dir dafür.
