proggen.org

Verfasst: **So Sep 30, 2012 12:28 pm**

hey Leute ich habe mit Javascript eine einfache Animation erstellt. Bei mir wird die Animation einmal schnell einmal langsam abgespielt und einmal ist Firefox am abstürzen^^ Kann mir vielleicht jemand Tipps geben was ich falsch gemacht habe und ob derjenige auch unter Performance Lecks leidet bei dem Script. Achja die Links spielen noch keine Rolle!!

Code: Alles auswählen

<html>
	<head>
		<style>
			div#wrapper
			{
				position: absolute;
				top: 200px;
				left: 300px;
				height: 400px;
				width: 200px;
				border: 1px solid red;
			}
			div#fenster
			{
				position: absolute;
				top: 25px;
				height: 350px;
				width: 100%;
				overflow: hidden;
			}
			div#inhalt
			{
				padding: 5px;
			}
			hr
			{
				width: 90%;
			}
		</style>
		<script type="text/javascript">
			var i = 0;
			var run = true;
			var richtung = "unten";
			
			function start()
			{
				hight = document.getElementById('inhalt').offsetHeight;
				aktivieren();
			}
			
			function bewegen()
			{
				if(run)
				{
					if(i<=hight-350 && richtung == "unten")
					{
						i++;
						document.getElementById('inhalt').style.marginTop = ~i + "px";
						setTimeout("bewegen()",10);
					}
					else
					{
						richtung = "oben";
					}
					if(i >= 0 && richtung == "oben")
					{
						i--;
						document.getElementById('inhalt').style.marginTop = ~i + "px";
						setTimeout("bewegen()",10);
					}
					else
					{
						richtung = "unten";
						bewegen();
					}
				}
			}
			
			function aktivieren()
			{
				run = true;
				bewegen();
			}
		</script>
	</head>
	<body onload="start();">
		<div id="wrapper">
			<a href="#" >Oben</a>
			<div id="fenster"> 
				<div id="inhalt" onmouseout="aktivieren()" onmouseover="run=false;">
					Hallo das ist ein Text und der soll spannend sein und ich hoffe er ist es auch und so weiter auf jeden Fall
					<hr/>
					Hallo das ist ein Text und der soll spannend sein und ich hoffe er ist es auch und so weiter auf jeden Fall
					<hr/>
					Hallo das ist ein Text und der soll spannend sein und ich hoffe er ist es auch und so weiter auf jeden Fall
					<hr/>
					Hallo das ist ein Text und der soll spannend sein und ich hoffe er ist es auch und so weiter auf jeden Fall
					<hr/>
					Hallo das ist ein Text und der soll spannend sein und ich hoffe er ist es auch und so weiter auf jeden Fall
					<hr/>
					Hallo das ist ein Text und der soll spannend sein und ich hoffe er ist es auch und so weiter auf jeden Fall
					<hr/>
					Hallo das ist ein Text und der soll spannend sein und ich hoffe er ist es auch und so weiter auf jeden Fall
					<hr/>
					Hallo das ist ein Text und der soll spannend sein und ich hoffe er ist es auch und so weiter auf jeden Fall
					<hr/>
					Hallo das ist ein Text und der soll spannend sein und ich hoffe er ist es auch und so weiter auf jeden Fall
					<hr/>
					Und jetzt schreibe ich wieder bullshit rein und hoffe er gefällt sehr den was anderes habe ich auch nie zu schreiben und das was
					gut so ich weiß nicht vielleicht auch nicht aber mal schauen blablablbla
				</div>
			</div>
			<a href="#" >Unten</a>
		</div>
	</body>
</html>

Verfasst: **Di Okt 02, 2012 11:24 am**

Ich habe das gestern mal kurz in den Browser geladen und eine Auslastung von 100% erhalten.

Bei der Richtung unten rufst Du bewegen ohne SetTimeout auf... das führt schonmal dazu, dass hier eine vielleicht etwas viel passiert.
Außerdem können die Timeouts ja mehrfach auflaufen... die Funktion wird also mehr und mehr gleichzeitig gerufen, bis irgendwann der Stack explodiert.

Verfasst: **Di Okt 02, 2012 12:26 pm**

Xin hat geschrieben: Bei der Richtung unten rufst Du bewegen ohne SetTimeout auf... das führt schonmal dazu, dass hier eine vielleicht etwas viel passiert.

Eigentlich nicht oder, weil die Funktion sich wieder selbst aufruft und die Richtung ja bereits geändert ist.

Xin hat geschrieben:Außerdem können die Timeouts ja mehrfach auflaufen... die Funktion wird also mehr und mehr gleichzeitig gerufen, bis irgendwann der Stack explodiert.

Ja das habe ich mir auch gedacht habe dann auch die Funktion in zwei Funktionen getrennt leider mit dem gleichen Ergebnis.

Verfasst: **Di Okt 02, 2012 1:13 pm**

canlot hat geschrieben:
Xin hat geschrieben: Bei der Richtung unten rufst Du bewegen ohne SetTimeout auf... das führt schonmal dazu, dass hier eine vielleicht etwas viel passiert.
Eigentlich nicht oder, weil die Funktion sich wieder selbst aufruft und die Richtung ja bereits geändert ist.
Xin hat geschrieben:Außerdem können die Timeouts ja mehrfach auflaufen... die Funktion wird also mehr und mehr gleichzeitig gerufen, bis irgendwann der Stack explodiert.
Ja das habe ich mir auch gedacht habe dann auch die Funktion in zwei Funktionen getrennt leider mit dem gleichen Ergebnis.

Da ich jetzt ehrlich gesagt auch nicht sehen kann, was Du eigentlich schreiben willst, sondern eigentlich nur den Text mehr oder weniger schnell hin und her zuckelt, könntest Du mal beschreiben, was Du eigentlich genau herstellen möchtest. ^^

Verfasst: **Di Okt 02, 2012 6:24 pm**

Xin hat geschrieben: Da ich jetzt ehrlich gesagt auch nicht sehen kann, was Du eigentlich schreiben willst, sondern eigentlich nur den Text mehr oder weniger schnell hin und her zuckelt, könntest Du mal beschreiben, was Du eigentlich genau herstellen möchtest. ^^

Doch eigentlich schon

Es soll ein News Slider werden der sich die ganze zeit nach oben und unten langsam bewegt.

Verfasst: **Di Okt 02, 2012 8:44 pm**

Bin mir nicht sicher... aber ich glaube, Xin hat Recht... du rufst die Funktion zuviel auf, was sich potenziert!

Im ersten Durchlauf ist Richtung nicht gesetzt, ok, also setzt du es im Else der zweiten IF und rufst die Funktion wieder auf.Soweit so gut

Jetzt ist in "Richtung" der Wert "unten"

Code: Alles auswählen

    if(i<=hight-350 && richtung == "unten")
               {
                  i++;
                  document.getElementById('inhalt').style.marginTop = ~i + "px";
//
// hier wird jetzt bewegen das erste mal aufgerufen
//
                  setTimeout("bewegen()",10);
               }
               else
               {
                  richtung = "oben";
               }

// Aber das Script läuft noch weiter - SetTimout beendet die Verarbeitung nicht.
// In Richtung steht noch "unten"
// also wird die IF nicht ausgeführt, sondern das Else
               if(i >= 0 && richtung == "oben")
               {
                  i--;
                  document.getElementById('inhalt').style.marginTop = ~i + "px";
                  setTimeout("bewegen()",10);
               }
               else
               {
                  richtung = "unten";
                  bewegen(); // hier rufst du jetzt bewegen das zweite mal auf.
               }

Beim ersten Durchlauf sind das dann 2 Aufrufe, beim 2. Durchlauf sind es 4, dann 8, dann 16, ... bei einer hight von +100 (über 350) kommst du auf 2 hoch 100 Funktionsaufrufe... hüstel... das sprengt jeden RAM.

Vielleicht irre ich mich auch... habs nicht getestet.

proggen.org

Abstürze bei js Script.

Abstürze bei js Script.

Re: Abstürze bei js Script.

Re: Abstürze bei js Script.

Re: Abstürze bei js Script.

Re: Abstürze bei js Script.

Re: Abstürze bei js Script.