Alternative zu setTimout(); wird dringend gesucht

[DerMilchmann]

Hallo liebe ;-) tutorials.de Community,
ich habe folgendes Problem: Bestimmt ist Euch, ich hoffe ich darf "EUCH" duzen, der Accordion Effekt von Mootools, jquery und inzwischen auch script.aculo.us bekannt. Diesen habe ich versucht "nachzubauen". Er sieht momentan so aus.

activepath = function() {
		
		var sfEls = document.getElementById(menuelement).getElementsByTagName("a");
		for (var i=0; i<sfEls.length; i++) {
			sfEls[i].onclick=function() {
				
				var liElements = this.getParent().getParent().getElementsByTagName("li");
				for (var j=0; j<liElements.length; j++) {
					if (liElements[j].className == 'activepath'){
						liElements[j].className = liElements[j].className.replace(new RegExp("activepath\\b"), "").trim();
						var olEls = liElements[j].getElementsByTagName("ol");
						for (var k=0; k<olEls.length; k++){
							if (olEls[k].className.indexOf('invisible') >= 0){
								olEls[k].className = olEls[k].className.replace(new RegExp("invisible\\b"), "").trim();
															
							}
						}
					}
					
				}
				this.getParent().className+=" activepath";
				var olEls = this.getParent().getElementsByTagName("ol");
				for (var j=0; j<olEls.length; j++) {
					olEls[j].className+=" invisible";
				
				if (this.getParent().className =' activepath') {
							
								
									var oelss = this.getParent().getElementsByTagName("ol");
									for (var k=0; k<oelss.length; k++) 
									{
										for(var i=0; i<101; i++)
										{
											
											oelss[k].setStyle('height', i + '%');
											//setTimeout   ?
											
										}
									}
									
									
									
								
								
								
					}
				}
			}
		}
}

Die klasse invisible setzt die Höhe aller <ol>'s unterhalb der Klasse activepath auf height:0; overflow:hidden;
Der entscheidende Teil ist aber dieser hier:

			if (this.getParent().className =' activepath') {
							
								
									var oelss = this.getParent().getElementsByTagName("ol");
									for (var k=0; k<oelss.length; k++) 
									{
										for(var i=0; i<101; i++)
										{
											
											oelss[k].setStyle('height', i + '%');
											//setTimeout   ?
											
										}
									}
									
									
									
								
								
								
					}

in diesem Teil soll die Höhe Schritt für Schritt auf 100% gesetzt werden. Deswegen dachte ich, ich knall da einfach setTimeout(); rein mit nem Wert von ungefähr ner viertel sekunde bevor die for schleife weiter hochzählt. Was allerdings nicht funktioniert, warum auch immer.
Ich habe alles erdenkliche versucht und auch viel gegoogelt.
Habt Ihr vielleicht eine Idee und könnt mir helfen. BItte!

 

[Martin Schroeder]

Meines Wissens nach führt SetTimeout() den übergebenen Code nach der angegebenen Zeit aus. Es funktioniert also nicht so wie die sleep-Funktion in C zB.
So etwas, das die Ausführung des Codes für eine bestimmte Zeit unterbricht, gibt es in JavaScript nicht. Du müsstest dir ne eigene Funktion schreiben, zB. mit einer Schleife, in der immer wieder überprüft wird, ob seit dem Eintritt die gewünschte Zeit vergangen ist, bis sie terminiert.

 

[DerMilchmann]

Vielen DAnk für die schnelle Antwort.
Etwas änliches habe ich bereits versucht gehabt.
Die CPU Auslastung stieg auf 100% an und der Browser ließ sich nciht mehr bedienen.
Hast du vielleicht ein Beispiel für mich?

Wäre dir sehr sehr dankbar!

 

[OnlyFoo]

Nein. Es gibt dafür keine CPU entlastende Möglichkeit. Du musst also deinen Code so umschreiben, dass er mit setTimeout funktioniert.

 

[DerMilchmann]

Danke dir. Ich krieg das nicht hin.

Hab jetzt folgendes versucht:

var mySize = new Array(
    '1',
    '2',
    '3',
    '4',
    '5',
	'6',
	'7',
	'8',
	'9',
	'10',
	'11',
	'12',
	'13',
	'14',
	'15',
	'16',
	'17',
	'18',
	'19',
	'20',
	'21',
	'22',
	'23',
	'24',
	'25',
	'26',
	'27',
	'28',
	'29'
    );		//erstmal Testweise ^^					
							
	var height = 0;							
	function myFunx(index) {
    if(!index || index > mySize.length) {
        index = 0;
    }
    setTimeout('myFunx('+(index+1)+')', 2000);
    
	height = mySize[index];
	
}

und dann halt:

oelss[k].setStyle('height', height+ '%' );

Firebug zeigt keinen fehler an und die höhe ist immer 0;
ich versteh das nicht. Bin nicht so ein Pro. Beschäftige mich mehr mit CSS und bin gerade total verzweifelt.

 

[Quaese]

Hi,

wird die Methode setTimeout aufgerufen, wird mit der Ausführung nachfolgender Anweisungen nicht gewartet. Das
ist der Grund, dass zwar eine Zeitverzögerung bis zum ersten Ausführen eintritt, aber zwischen den einzelnen Schritten nicht.

Es ist jedoch möglich, eine eigene Kontrollstruktur zu bauen, die eine for-Schleife nachbildet. Unterschied zu oben ist jedoch,
dass die Funktion selbst zeitverzögert aufgerufen wird.

Das nachfolgende Beispiel demonstriert den Unterschied:

<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
var hTimer_01 = null;
function theFunc_01(){
  for(var i=0; i<3; i++){
    for(var j=0; j<3; j++){
      hTimer_01 = window.setTimeout("document.getElementById('outID_01').innerHTML += 'i = ' + "+i+" + ', j = ' + "+j+" + '<br />'", 100);
    }
  }
}


var hTimer_02 = null;
var intK = 0,     intL = 0;
var intK_max = 2, intL_max = 2;
function theFunc_02(){
  document.getElementById("outID_02").innerHTML += "k = " + intK + ", l = " + intL + "<br />";
  if(intL++ >= intL_max){
    intL = 0;
    if(intK++ >= intK_max)
      return;
  }
  hTimer = window.setTimeout("theFunc_02()", 100);
}

window.onload = function(){
  theFunc_01();
  theFunc_02();
}
 //-->
</script>
</head>
<body>
<div style="float: left; width: 30%;" id="outID_01"></div>
<div style="float: left; width: 30%;" id="outID_02"></div>
</body>
</html>

Ciao
Quaese