Untotes setInterval zickt herum

[Hexodus]

Meine Routine funktioniert soweit sehr gut - mit zwei Buttons steuere ich das scrolling eines absolut positionierten Div-Elements. Dabei wird jeweils um um 130 pixel nach Rechts oder Links gescrollt. Allerdings zeigt sich ein seltsames Phänomen, das scrollen nach Links wird immer schneller, nach Rechts hingegen immer langsamer ohne dass ich das beabsichtigt habe. Besonders deutlich tritt das mit Google Chrome auf. Bei Internet Explorer hingegen (!)ausgerechnet scheint es gut zu klappen. Im verdacht habe ich setInterval, das offenbar mit clearInterval nicht immer gelöscht zu werden scheint. Eher sieht es so aus als würde setInterval nur unterbrochen und beim nächsten Funktionsaufruf neu erzeugt + das alte setInterval fortgesetzt zu werden = Kummulativer Effekt der sich als Beschleunigung bzw. Abbremsen manifestiert. Das zu wissen hilft mir jedoch nicht weiter, denn ich kenne keine andere andere Möglichkeit, um setInterval mundtot zu machen. Habt Ihr eine Idee, wie mir das gelingen könnte?

Hier, der Code:

  
<script type="text/javascript">  
  
var Scrol_Wert = 0;  
var Abstandswert= 130;  
var Cur_Pos =0;  
var OneClickATime=1;  
  
  
function Scroller(richtung)  
{  
	  
	if (richtung =='left')  
	{  
		Scrol_Wert=Scrol_Wert-2;  
		Cur_Pos=Cur_Pos+2;  
	}	  
  
	if (richtung =='right')  
	{  
	Scrol_Wert=Scrol_Wert+2;  
	Cur_Pos=Cur_Pos+2;  
	}  
	  
	if (Cur_Pos<=Abstandswert)  
	{  
		x.style.left = Scrol_Wert + "px";;  
		  
	}  
	  
	else  
	{  
		clearInterval(Animator);  
		Animator = undefined;  
		OneClickATime =1; //Funktion wieder anklickbar machen  
		Cur_Pos=0;  
	}  
}  
  
function ScrollMe(richtung)  
{  
	  
		if(OneClickATime)  
		{  
			  
			x = document.getElementById("Regal_Container");  
	  
			OneClickATime =0; //Funktion für die Animationsdauer sperren  
			Cur_Pos=0;  
			Animator = setInterval("Scroller('"+richtung+"')", 10);  
		}		  
}  
  
</script>  
  

  
  
Mit je einem Bildelement als Buttons wird das ganze gesteuert.  
  
<?PHP  
echo "<a href=\"javascript:ScrollMe('left')\"><img src='pix/dist-comp/0.jpg' width='80' height='127' border='0'></a><br>";  
echo "<a href=\"javascript:ScrollMe('right')\"><img src='pix/dist-comp/0.jpg' width='80' height='127' border='0'></a><br>";  
?>  

[Encoder]

Nimm doch SetTimeout oder wie das heißt, jedenfalls halt die Funktion die nur einmalig aufgerufen wird. Am Ende deiner Aktion rufst du die dann wieder neu auf, oder eben nicht mehr wenn du fertig bist.
Ein ähnliches Problem hatte ich auch mal. Schnelles klicken auf den Button erzeugt dann parallele Timeouts, die sich gegenseitig aufheben (der eine Aufruf macht ein Element größer, der andre wieder kleiner => es endet nie).
Inzwischen habe ich mir die Richtung gemerkt, die bei jedem Klick neu gesetzt wird und verwende nur die einmalige Timerfunktion.

[Hexodus]

Genau daran habe ich auch gedacht es mit SetTimeout als nächstes zu versuchen. Danke Encoder, Deine Meinung bestärkt mich in diesem Vorhaben.

[cro$$]

Hier, der Code:

[code lang=javascript]
<script type="text/javascript">

var Scrol_Wert = 0;
var Abstandswert= 130;
var Cur_Pos =0;
var OneClickATime=1;

var Animator; //<- Ergänze mal diese Zeile hier! So wie es bei dir im Code
                 // aussieht, handelt es sich bei der Variable 'Animator'
                 // um eine lokale in den Funktionen Scroller und Scrollme.
                 // Ergo musst du sie global deklarieren um darauf in den jew.
                 // Funktionen zugreifen zu können. Bisher ist das nicht bei
                 // dir der Fall, denn die Variable 'Animator' wird nur lokal
                 // deklariert!
                 // MFG cro$$