javascript

Jofre

Erfahrenes Mitglied
Ich steuere zeitlich eine javaascript Animation über setinterval(animation,zeitintervall)
Jetzt möchte ich beim ersten Aufruf mit einem Zeitinterval von 1000 mSek starten. Vom zweiten Aufruf an mit einem Zeitinterval von 5000 mSek.
Das funktioniert anscheinend nicht weil das zeitintervall des ersten Aufruf beibehalten wird. Es wird nicht aktualisiert.
Lösungsidee?
GuG
Joachim
 
Klappt bei mir nicht. setTimeout wird ignoriert.
function initCanvas(){
var ctx = document.getElementById('my_canvas').getContext('2d');
var cW = ctx.canvas.width, cH = ctx.canvas.height;
var y = 0, x = 0, z=0 ;

function animate(){
ctx.clearRect(0, 0, cW, cH);
ctx.fillStyle = "blue";
ctx.fillRect(x, 0, 50, 50);
y++;
x++;
}
setTimeout(animate,6000);
var animateInterval = setInterval(animate, 1000);

ctx.canvas.addEventListener('click', function(event) {
clearInterval(animateInterval);
});
}
window.addEventListener('load', function(event) {
initCanvas();
});
 
So würde es gehen
*** Link entfernt, weil Seite nicht mehr erreichbar ***
 
Zuletzt bearbeitet:
Basti

Danke , aber es funktioniert nur wenn die Verzögerung bei setTimeout größer als bei setInterval.
Umgekehr aber nicht.
anmerkung: die zeitliche Reihenfolge war in meinem Beispielscode auch nicht korrekt dargestellt. entschuldigung
 
Das habe ich mir auch gedacht und getestet. Aber wie geht es denn?
meine jetzige Idee ist, dass ich setintervall aufrufe mit verzögerung z.B. 1000
dann nach der ersten Ausführung ein clearintervall mache und dann wieder setinterval mit verzögerung 6000. aufrüfe.
würde das funktionieren und wäre das the state oft the art?
 
und da habe ich noch eine zweite frage.
Ich möchte ein Bild von links nach rechts über den Bildschirm wandern,laufen,rasen lassen.
die Geschwindigkeit soll sich kontinuierlich erhöhen.
da es flüssig aussehen soll muss es wohl über setInterval laufen.

wie könnte eine elegante Lösung aussehen?
 
Zurück