Position der setTimeout-Methode verstehen

[Vokabulator]

function expand(element){ // kriegt als Parameter jedes mögliche Element bzw. jede id
	var target = document.getElementById(element);
	var h = target.offsetHeight; // höhe des divs
	var sh = target.scrollHeight; // ???
	
	var loopTimer = setTimeout('expand(\''+element+'\')',8); // Warum steht looper hier??
	
	if(h < sh){
		h += 5;
	} else {
		clearTimeout(loopTimer);
	}
	target.style.height = h+"px";
}

Hallo! Der Code hier funktioniert nur so, wenn der looper genau da steht wo er steht. Wenn ich ihn ans Ende mache, klappt es nicht. Ich verstehe nicht, wieso. Wenn ich den looper ans Ende mache, dann läuft die Funktion einfach weiter, quasi ne Endlos-Schleife.

Vielen Dank für eine Erklärung!

[Christian Marquardt]

Weil es sich um einen rekursiven Aufruf handelt und die Abbruchbedingung danach im if kommt

[fanderlf]

Die Variable loopTimer ist praktisch ein Merker auf die setTimeout Funktion. Diese braucht man um einen bereits gestarteten setTimeout wieder zu löschen. Wenn Du jetzt das setTimeout hinter das if verschiebst, dann wird immer der setTimeout aus dem letzten Aufruf gelöscht. Das ganze wird somite als insgesamt unwirksam. Danach wird IMMER ein neuer gestartet, weil der setTimeout Aufruf hinter der Abbruchbedingung steht, so wie es Christian auch schon erklärt hat.

Das Beispiel hier kannst Du Dir auch gerne nochmal anschauen um die clearTimeout Funktion besser zu verstehen

[Vokabulator]

Aah okay, klar... ich hab die Abbruchbedingung vergessen!

Also sieht der gesamte Funktionsaufruf so aus:

1. Ich hole mir das Element in target
2. ich hole mir offsetheight und innerHeight
3. Der setTimeout wird ausgelöst und in loopTimer gespeichert
4. Die if-bedingung wird überprüft
5. die height wird zugewiesen
7. die Funktion wird erneut aufgerufen
8. wieder das Element geholt (oder bleibt das sozusagen zwischengespeichert?)
9. wieder die höhe (oder auch nicht
10. wiederum wird ein setTimeout in looper gespeichert
11. wiederum bedingung
12. wiederm höhe
usw.
bis irgendwann die Abbruchbedingung erfüllt ist und der Timer dadurch gelöscht wird.

Ist der Ablauf so richtig?

[fanderlf]

Ja ich vermute das Ding baut eine Animation wo eine Box immer größer wird bis sie in etwa so groß ist dass sie in das Fenster passt. Solange das Fenster noch nicht groß genug ist wird die Höhe ermittelt, um 5 pixel erhöht und dann wieder zugewiesen. Dadurch wird die Box größer. Ist die maximale Höhe erreicht (sh, element.scrollHeight) wird der Timer gelöscht, das entspricht dem anderem Pfad im if, und die Animation beendet.

[Falk Prüfer]

Hallo,

also ich würde das ja anders lösen: Momentan wird bedingungslos ein Timeout gestartet, nur um ihn dann unter einer Bedingung wieder abzubrechen. Besser wäre doch den Timeout nur unter der Bedingung zu starten. Auch könnte man sich dann den Else-Zweig sparen.
[highlight=javascript]
function expand(element){ // kriegt als Parameter jedes mögliche Element bzw. jede id
var target = document.getElementById(element);
var h = target.offsetHeight; // höhe des divs
var sh = target.scrollHeight; // ???

if(h < sh){
h += 5;
target.style.height = h+"px";
setTimeout('expand(\''+element+'\')',8); // Hier gehört der meiner Meinung nach hin!
}
}
[/highlight]

Gruß Falk

[Falk Prüfer]

Ja ich vermute das Ding baut eine Animation wo eine Box immer größer wird bis sie in etwa so groß ist dass sie in das Fenster passt. Solange das Fenster noch nicht groß genug ist wird die Höhe ermittelt, um 5 pixel erhöht und dann wieder zugewiesen.

Nicht ganz... Mit der Fenstergröße hat das nichts zu tun. scrollHeight ist der Bereich des Elements, durch den gescrollt werden kann. Die Animation vergrößert die Box also solange, bis in ihr nicht mehr gescrollt werden muß. Nachteil: ggfs. wird sie dadurch größer als ihr umgebendes Element und dann muß das gescrollt werden .

Gruß Falk

[Vokabulator]

Also vieln Dank für eure Antworten! Aber ganz unabhängig davon, ob der COde so optimal ist, stimmt denn der Ablauf so, wie ich ihn beschrieben habe?

[Falk Prüfer]

...stimmt denn der Ablauf so, wie ich ihn beschrieben habe?

Aus meiner Sicht nicht, da ich wie bereits gesagt den Timerstart hinter die Bedingung legen und auf den bedingten Timerabbruch verzichten würde.

Gruß Falk

[fanderlf]

Aus meiner Sicht nicht, da ich wie bereits gesagt den Timerstart hinter die Bedingung legen und auf den bedingten Timerabbruch verzichten würde.

Gruß Falk

Sehe ich auch so. Wenn du das settimeout einfach an die Stelle packst an der das cleartimeout steht und das cleartimeout ganz heraus nimmst sollte das eigentlich genauso funktionieren.

[Vokabulator]

Okay, da drücke ich mich wohl etwas falsch aus. Mir geht es weniger darum, wie der Code noch geändert oder verbessert werden kann, sondern darum, was mit dem setTimeout geschieht. Der erste Aufruf ist mir klar, da werden die ganzen Werte in die Variablen gespeichert und die Bedingung wird durchlaufen. Was aber genau passiert bei setTiemout? Da wird ja dem Programm mitgeteillt, dass es die function expand noch einmal aufrufen soll und zwar alle 0,008 Sekunden. Heißt das, dass dann beim nächsten Funktionsaufruf der Teil mit "var loopTimer = setTimeout()" ignoriert wird und nur noch der Rest der Funktion abläuft oder erfährt das Programm bei jedem durchlauf quasi erneut, dass es diese Funktion alle 8 Millisekunden aufrufen soll?

[fanderlf]

Nein setTimeout ist kein Interval, sondern einfach der Zeitpunkt andem die Funktion das nächste mal ausgeführt werden soll. Es gibt auch eine Funktion setInterval, diese ruft die mitgegebene Funktion dann in einem angegeben Zeitinterval auf. Damit hätte man das Problem bestimmt auch lösen können. Viele Wege führen nach Rom

http://de.selfhtml.org/javascript/ob...m#set_interval

[Vokabulator]

Ah okay.. das heißt das passiert jedes Mal wieder neu. Okay... Ich glaub, jetzt hab ichs begriffen. DANKE!