setTimeout problem
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angestellten vermutungen
array
aufruf
beispiel
code
dank
einstellung
endlosschleife
funktion
gelten
helfen
laufen
nehmen
problem
stehen
tauchen
text
treten
umgehen
vorhaben
-
Hi
Ich habe ein miniJSscript, was den Text in einem Div beim überfahren bewegt und beim Verlassen wieder zurückbewegt. Das ganze geschieht über verringern / vergrößern der padding-left eigenschaft des divs. 5 ist dabei standart. (beim überfahren verschiebe bis 25, beim verlassen fahre zu 5 zurück) Eigentlich ganz einfach und klappt auch super, aber wenn man das div schnell überfährt bleibt der Text zb in der Mitte hängen und zittert da wie blöd rum. Ich weiss bzw vermute, dass das daranlieg, dass eine Function in js mehrmals zur gleichen Zeit laufen kann, und da beide gegeneinander arbeiten, sich das dann in einer Endlosschleife aufhängt. Doch wie kann ich das umgehen???
Hier mal das script:
var pedd = 5; function ithover(id,mas){ if (mas == 'on'){ if (pedd < 25){++pedd; document.getElementById(id).style.paddingLeft = pedd + 'px'; if (mas != 'off'){window.setTimeout(function(){ithover(id,mas)}, 5);}}} else if (mas == 'off'){ if (pedd > 5){--pedd; document.getElementById(id).style.paddingLeft = pedd + 'px'; if (mas != 'on'){window.setTimeout(function(){ithover(id,mas)}, 5);}}} }
aufruf geht so:
<div class="menu1" id="mm4" onmouseover="ithover('mm4','on');" onmouseout="ithover('mm4','off');">
ich finde leider Keine Lösung, hoffe aber dass ihr mir da weiterhelfen könnt
MVG -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hi,
also die bisher angestellten Vermutungen scheinen mir richtig:
Das Problem kommt daher, dass die Funktion ithover immer wieder eine neue Funktion erzeugt und dabei die alten Parameter übergibt. Wärhend dieser Zeit kann die Funktion ein zweites mal (oder öfter gestartet werden), jedoch mit anderen Parametern. Gleichzeitig arbeiten die Funktionen jedoch auf der globalen Variablen padd. So kann es kommen, dass der eine Funktionsaufruf die Variable padd erhöht, der andere die Variable wieder herunterzählt und so die Grenzen für das Ende der Funktion nie erreicht werden. Wenn ich mich nicht täusche nennt der Informatiker das "Seiteneffekt", der aber in deinem Fall eigentlich beabsichtigt ist.
Eine mögliche Lösung ist die globale Varibable, so wie qap2 es vorgeschlagen hat. Damit wird erreicht, dass entweder nach rechts oder links verschoben wird und nicht hin und her. Diese Variable darf allerdings nur beim ersten Aufruf gesetzt werden, da sie sonst ja wiederum hin und her geschaltet wird.
Anders gesagt: Nur wenn die Maus über das div oder aus dem div heraus fährt wird festgelegt, ob die Bewegung links oder rechts erfolgt. Interne Funktionsaufrufe haben keine Einfluss auf die Richtung.
Nun, das war die Theorie und hier der Code;):
Habe mit IE und FF getestet und hoffe es funzt auch bei dir!var pedd = 5; var dir; function ithover(id,mas){ if (mas) dir = mas; if (dir == 'on'){ if (pedd < 35){ ++pedd; window.setTimeout(function(){ithover(id,false)}, 5); } } else if (dir == 'off'){ if (pedd > 5){ --pedd; window.setTimeout(function(){ithover(id,false)}, 5); } } document.getElementById(id).style.paddingLeft = pedd + 'px'; }
Gruß
Manni -
Sagenhaft!! Großes Danke an euch alle!!
Allerdings klappts nur bei einem also wenn ich ein div habe in dem der Text laufen soll. bei mehreren klappts nichtmehr. Ich habe nähmlich 4 Stück:
das aktuelle js:
<script language="javascript" > var pedd = 5; var dir; function ithover(nr, mas){ if (mas) dir = mas; if (dir == 'on'){ if (pedd < 35){ ++pedd; window.setTimeout(function(){ithover(nr, false)}, 5); } } else if (dir == 'off'){ if (pedd > 5){ --pedd; window.setTimeout(function(){ithover(nr, false)}, 5); } } document.getElementById('menutitel_' + nr).style.marginLeft = pedd + 'px'; } </script>
und die Aufrufe:
<div class="menu1" id="menu1_1" onmouseover="ithover(1, 'on');" onmouseout="ithover(1 'off');"> <p class="menutitel" id="menutitel_1" >Meine seite</p> </div> <div class="menu1" id="menu1_2" onmouseover="ithover(2,'on');" onmouseout="ithover(2, 'off');"> <p class="menutitel" id="menutitel_2" >Einstellungen</p> </div> <div class="menu1" id="menu1_3" onmouseover="ithover(3, 'on');" onmouseout="ithover(3, 'off');"> <p class="menutitel" id="menutitel_3" >Styles</p> </div> <div class="menu1" id="menu1_4" onmouseover="ithover(4, 'on');" onmouseout="ithover(4, 'off');"> <p class="menutitel" id="menutitel_4" >Bilder</p> </div> </div>
Da tauchen dann so Sachenauf wie, dass der Text wie wild herumspringt oder einfach irgendwo stehen bleibt. Ist echt grausam. Ich hab schon versucht 4 Variablen zu nehmen, habs aber irgendwie falsch gemacht denn dan ging garnix mehr. Hoffe Ihr könnt mir da auch noch helfen... MVG
Beitrag zuletzt geändert: 15.2.2010 10:47:55 von programtools -
programtools schrieb:
Da tauchen dann so Sachenauf wie, dass der Text wie wild herumspringt oder einfach irgendwo stehen bleibt. Ist echt grausam. Ich hab schon versucht 4 Variablen zu nehmen, habs aber irgendwie falsch gemacht denn dan ging garnix mehr. Hoffe Ihr könnt mir da auch noch helfen... MVG
Erst einmal ein kleiner hinweis:
div class="menu1" id="menu1_1" onmouseover="ithover(1, 'on');" onmouseout="ithover(1 'off');">
Da fehlt ein , bei onmouseout -
Danke, den Fehler hab ich auch bemerkt und korregiert und hatte vergessen meinen beitrag zu editieren. Aber das eigentliche Problem wird dadurch nicht gelöst.
Die Funktion kann ja 4 mal und nicht nur einmal wie im Beispiel ganz oben aufgerufen werden. und da tritt wieder das Problem mit den Variablen und so auf, wo ich nichtmehr durchblicke. MVG -
Danke das hab ich *versucht* und das hat garnich geklappt. Keine Ahnung aber irgendetwas hab ich falsch gemacht. Könntest du mir ev ein Beispiel posten, damit ich weiss wie ich das inm zusammenhang mit meinem Vorhaben einsetzten muss?? MVG
-
<script language="Javascript" type="text/javascript"> <!-- var pedd = new Array(5,5,5,5,5); // Fünf Elemente var dir = new Array(); function ithover(nr, mas){ if (mas) dir[nr] = mas; if (dir[nr] == 'on'){ if (pedd[nr] < 35){ ++pedd[nr]; window.setTimeout(function(){ithover(nr, false)}, 5); } } else if (dir[nr] == 'off'){ if (pedd[nr] > 5){ --pedd[nr]; window.setTimeout(function(){ithover(nr, false)}, 5); } } document.getElementById('menutitel_' + nr).style.marginLeft = pedd[nr] + 'px'; }; //--> </script>
Kein großes Hexenwerk, oder? -
nein das ist gigantisch!!! Das klappt super! Zugegeben, meins sah zwar ähnlich aus mit deinem aber ich hatte ein paar (viele) kleine Fehler drinn und daher gings nicht. Vielen Dank für deine Mühe und Hilfe!! MVG
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
