javascript


Jofre

Erfahrenes Mitglied
#1
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
 

Jofre

Erfahrenes Mitglied
#3
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();
});
 

Jofre

Erfahrenes Mitglied
#6
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
 

ComFreek

Mod | @comfreek
Moderator
#7

Jofre

Erfahrenes Mitglied
#8
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?
 

Jofre

Erfahrenes Mitglied
#10
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?
 

basti1012

Erfahrenes Mitglied
#12
so ganz verstehe ich dich nicht . in mein beispiel ist doch vollkommen egal was da für zeiten stehen. setimeout wird enmal aufgerufen,und twar dann was da steht . ca 3 Sekunden. Nach den 3 Sekunden läut der Intervall durch. Da ist auch egal was für nee Zahl da steht.

Vieleicht verstehe ich das auch alles falsch. Du willst das deine Function nach Seitenaufruf in ca x Sekunden startet und dann läuft ? Das wäre doch genau das was ich zeigte ? Oder verblöde ich jetzt ?
 

ComFreek

Mod | @comfreek
Moderator
#13
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?
Das würde gehen, wäre aber m. E. unschön. Die Lösung hatte ich oben schon verraten ;) Siehe hier:
Nutze für die erste Aktion setTimeout, danach einmalig setInterval.
In Code etwa:
Javascript:
const firstTimeout = 1000;
const subsequentIntervalLength = 6000;

setTimeout(() => {
  yourFunction():
  setInterval(yourFunction, subsequentIntervalLength),
}, firstTimeout);
da es flüssig aussehen soll muss es wohl über setInterval laufen.
Da würde ich widersprechen. Für Animationen gibt es die API rund um "requestAnimationFrame". Danach kannst du mal googeln.
 

ComFreek

Mod | @comfreek
Moderator
#17
Bei all der Begeisterung für Neues bitte ich zu bedenken, dass Pfeilfunktionen von IE11 nicht unterstützt werden.
Dann empfehle ich ein gutes Buildsystem, das auf niedrigere ES-Standard herunterkompiliert. Nur wegen mangelnder Browserkompatibilität braucht das Software Engineering nicht darunter zu leiden ;)
(Aber ja, ich verstehe, dass dies ein hoher Initialaufwand ist und möglicherweise für ganz kleine Projekte nicht gerechtfertigt.)
 

ComFreek

Mod | @comfreek
Moderator
#19
Kannst du die Ausgabe der Fehlerkonsole bitte posten? :)

In welchem Browser testest du das? Wie @Sempervivum sagte, Fat Arrow Functions (... => {...}) werden (leider) nicht von allen Browsern unterstützt, auf die man heutzutage noch in der Wildnis trifft.
 

Neue Beiträge