Play/Pause Regler für Animation/Interval in JavaScript

Ich habe gerade die Funktion erneut überarbeitet, die für den Regler unten in der Ecke zuständig ist. Der Schieberegler ist HTML5 und wird nicht von allen Browsern unterstütz. Safari kann den Regler gut benutzen, Firefox 6 zeigt eine normales Texteingabefeld an. Wenn der Regler nach links geschoben wird, wird die Animation schneller. Der Button kann das ganze pausieren und wieder starten.

JavaScript:

function setIntervalspeed(value){
//Funktion ist für Geschwindigkeitsänderungen zuständig
	intervalspeed = value;
	//Restart des Timers	
	window.clearInterval(kinointerval);
	if (value>0){ kinointerval = window.setInterval('kinomodustimer()',intervalspeed); }
	id_intervalspeedstatus.innerHTML = intervalspeed+"ms"; //Ausgabe der Geschwindigkeit
};

function togglePlayPauseButton(onorof){
//Funktion für den Button im Kinomodus
	if (onorof=="on") {
		setIntervalspeed(saveSpeed);
		id_playpause.src = "./images/pause.png";
		id_playpause.setAttribute("onclick", "togglePlayPauseButton('off');");
	} else {
		saveSpeed = intervalspeed;
		setIntervalspeed(0);
		id_playpause.src  ="./images/play.png";
		id_playpause.setAttribute("onclick", "togglePlayPauseButton('on');");
	}
};

Wenn der Button geklickt wird, wird das Intervall gestoppt und erneut gestartet (mit anderem Wert). Der Schieberegler ruft direkt “setIntervalspeed()” auf

HTML:

<div id="Kinomodusoptions" class="Kinomodusoptions">
    <p class="Kinomodusoptions">Schnell -> Langsam</p>
    <input name="speedslider" type="range" min="20" max="1000" value="500" onchange="setIntervalspeed(this.value);">
    <img src="./images/pause.png" id="Playpause" onclick="togglePlayPauseButton('off');">
    <span id="Intervalspeedstatus" class="Kinomodusoptions"></span>
</div>

Alles was man braucht im Div “Kinomodusoptions” drin. Kein Schnickschnack. Input

Das Inputfeld type=”range” ist HTML5, kann aber auch schon jetzt genutzt werden. Dabei muss beachtet werden, dass der Benutzer auch Werte über “min” und “max” eingeben kann, wenn HTML5 nicht unterstütz wird.

Leider gibt es noch einen Bug, hier drin vermutlich nicht, weil die Animation bei mir immer von Vorne anfängt, das Diagramm und der Log bleiben aber korrekt.

Kommentare erwünscht!

Kinomodus

An dieser Funktion saß ich ziemlich lange. Der Fehler war nirgendwo zu finden und erschien willkürlich. Doch jetzt ist es gefixt. Zwar klappt es manchmal noch nicht, aber immerhin gibt es keine Endlosschleifen mehr. Das Problem war, dass die Länge der Bilder 0 beträgt, wenn ein Bild noch nicht geladen ist. Javascript liefert dann 0 für die Länge zurück, statt den “undefined”. Die Funktion ruft sich so lange selbst auf, bis alle Bilder geladen sind. Es handelt sich hierbei um eine Art zeitgesteurte Rekursion. Auch wenn der Bug behoben wurde, fehlt manchmal trotzdem ein Bild.

	drawRepeat: function(img,xpos,ypos) {
	//kachelt ein Bild entlang der X-Achse
		var i = 0;
                //macht es so oft bis Bilder geladen sind
		if (img.width>0) var amount = (this.breite)/(img.width)/
			else window.setTimeout("leinwand.drawBackground();", 30);
		do {
			this.ctx.drawImage(img, i*img.width + xpos, ypos);
			i++;
		} while (i  < amount)
	}