JS: setTimeout - einmal gehts, dann nicht mehr!?

nutellamitquark · #1 (**permalink**) 28.02.2010, 19:08

Hallo!

aalso, ich hab da ein blödes Problem mit JS - und wahrscheinlich bin ich einfach nur blind oder so ... (bin auch blutiger Anfänger

)

Ich möchte so ein div mit JS über das Fenster bewegen indem man auf die Flächen links und rechts klickt. Ich habe dafür eine Art Beschleunigung eingebaut und bremsen tut das ganze auch verzögert.

Nun ist aber das Problem, dass die ganze Geschichte einmal funktioniert – dann aber nicht mehr.
Also man bewegt das Teil - alles ok - stoppt es, indem man zb die Maustaste loslässt - möchte man es nun wieder bewegen, sprint die Box nur noch 1px oder so anstatt zu fahren.

Was ist da los? Werden da irgendwie die Timer gelöscht oder sowas?

Ich hab den Code mal aufbereitet, dass man das direkt Testen kann, wer will.

Wär super wenn ihr mir helfen könntet!

viele Grüße
Steffen

Code:

<html>
<head>
<title></title>
<style type="text/css">

div { border:1px solid red; }

#flow {
	height: 300px;
	overflow: hidden;
	position: absolute;
	top: 30%;
	width: 100%;
}

#flowLeft {
	background-color: blue;
	height: 40px;
	left: 20px;
	position: absolute;
	top: 140px;
	width: 40px;
}

#flowRight {
	background-color: blue;
	height: 40px;
	position: absolute;
	right: 20px;
	top: 140px;
	width: 40px;
}

#mrFlow {
	height: 200px;
	left: 100px;
	position: absolute;
	top: 30px;
	width: 200px;
}

</style>

<script type="text/javascript">

var mrFlowsPos = 100;
var movement = 0;
var direction = 0;

var goTimer;
var stopTimer;


function fFlow (inDirection) {
	direction = inDirection;
	
	movement++;
	mrFlowsPos = mrFlowsPos + (movement * direction);
		

	if (movement >= 18) {
		movement=18;
	} else {
		movement+= 0.30;
	}

	document.getElementById('mrFlow').style.left = mrFlowsPos + "px";
	
	goTimer = setTimeout("fFlow(direction)",10);
}

function fStop () {
	clearTimeout(goTimer);

	movement-=0.30;
	
	if (movement <= 0) {
		movement = 0;
		direction = 0;
		clearTimeout(stopTimer);
	}

	mrFlowsPos += movement * direction;

	
	document.getElementById('mrFlow').style.left = mrFlowsPos + "px";
	stopTimer = setTimeout("fStop()",10);


}

                            
</script>
</head>
<body>

<div id="flow">
	
	<div id="mrFlow"></div>

	<div id="flowLeft" onmousedown="fFlow(-1.0);" onmouseup="fStop();" onmouseout="fStop();"></div>
	<div id="flowRight" onmousedown="fFlow(1.0);" onmouseup="fStop();" onmouseout="fStop();"></div>
		
</div>

</body>
</html>

FrankW. · #2 (**permalink**) 28.02.2010, 19:51

Also bei mir gehts nach einer kleinen Änderung, du hast einfach nur nicht die Rekursion von stopTimer gecleart wenn man auf fFlow drückt

Code:

function fFlow(inDirection)
{
          clearTimeout(stopTimer);
          ......
          ...
}

nutellamitquark · #3 (**permalink**) 28.02.2010, 20:23

yay, vielen Dank!

Ich dachte mir schon, dass es wieder mal an einer Kleinigkeit liegt.

Ich dachte erst, dass ich den timer mit dem hier bereits stoppe....

Code:

if (movement <= 0) {
		movement = 0;
		direction = 0;
		clearTimeout(stopTimer);
	}

... aber grad eben fällt mir auf, dass die Funktion ja weiterläuft und er den Timer unten wieder startet! *doh*

jo, also vielen Dank nochmal!

grüße
Steffen

FrankW. · #4 (**permalink**) 28.02.2010, 21:35

Es sind oft die kleinen Fehler die einen stundenlang verzweifeln lassen, auch ich kenne das nur zu gut...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
setTimeout	David	Javascript & Ajax	4	19.07.2010 15:36
Frage zu setTimeout	gustavmega	Javascript & Ajax	0	23.11.2009 22:37
[Fehler] setTimeout innerhalb einer Klasse	Lord-Sfx	Javascript & Ajax	2	08.04.2009 00:37
Mit setTimeout funktion im eigenen Objekt aufrufen	PoWl	Javascript & Ajax	5	11.05.2008 10:35
JavaScript Countdown-Klasse	Sanchez	Javascript & Ajax	8	28.02.2007 13:14