jQuery animationszeit ermitteln

BlackScorp · 13.09.2010, 10:27

Hallo leute,

ich habe ein kleines Problem. Ich möchte beim klicken auf ein Div eine Animation starten, wenn man noch mal auf den div klickt, soll die animation beendet werden. Danach soll angezeigt werden, wieviele milisekunden zwischen ersten und zweiten klick vergangen sind. Folgenden code habe ich verwendet:

javascript:

PHP-Code:

      var time;

    var start = 0;

    var end = 0;

    $('.animationBar').click(function(){

        if($('.arrow').is(':animated')){

            $('.arrow').animate().stop();

            time = new Date();

            end = time.getTime();

        }else{

            time = new Date();

            start = time.getTime();

            $('.arrow').css('margin-left','0px');

            $('.arrow').animate({

                marginLeft: '+=199'

            }, 500,'linear', function() {

                time = new Date();

                end = time.getTime();

                $('.display').text(-1*(start-end));

            });

        }

       if(end -start > 0){

            $('.display').text((end-start));

        }

       

    });

es lauft also eine linie in einer bar von links nach rechts. Ich habe als animationsdauer 500 milisekunden eingestellt. also müsste bei mir nach der animation im display immer 500 stehen. jedoch kriege ich als ergebnis zwischen 502 und 510 und manchmal gibt es im browser kleine laggs und als ergebnis kriege ich 600+. meine fragen sind nun:

habe ich denn eine möglichkeit die zeit exakt herauszufinden?

und wieso ist die ausgabe größer als das erwartete ergebnis? habe ich an falschen stellen die zeit gespeichert?

MFG BlackScorp

Asipak · 13.09.2010, 10:41

Wo sind die [code]-Tags, Black?

Ist es notwendig, laufend ein neues Date-Objekt zu erzeugen?

Code:

(-1*(start-end));

Das sieht auch etwas wunderlich aus. Vertausche doch einfach Minuend mit Subtrahend.

BlackScorp · 13.09.2010, 11:07

ich muss immer ein neues objekt von date anlegen, sonst gibt mir die funktion getTime() immer den gleichen wert aus und end-start kommt immer 0 raus. ja das mit end-start habe ich später auch gesehen, habs auch geändert. es geht halt nur darum, die exakte diferenz zu ermitteln, wenn es überhaupt möglich ist.

ich möchte halt am ende sagen, dass bei einer animation von 1px pro milisekunde ich nach 500 milisekunden bei 500px in einer anzeige befinde . es geht um die sicherheit, ich möchte den aktuellen zeigerwert nicht als wert an ein ajax request schicken sondern nur wie lange es zwischen ersten und zweit klick gedauert hat um auf der serverseite mir den wert zu errechnen.

Chriz · 13.09.2010, 11:26

Wenn genau 500 rauskaeme, hiesse das ja, dass bestimmte Codefragmente keine Ausfuehrungszeit verbrauchen wuerden. Schliesslich wird sehr viel Code ausgefuehrt (auch in der jQuery-Lib) bevor du an die Stelle mit animate(..., 500, ...) gelangst. Einen Overhead hast du immer, nicht nur durch JS selbst, sondern auch ein Serverhusten kann das verursachen. Wenn du es glaubst besser zu wissen, hindert dich ja niemand daran 500 in das Ergebnisfeld zu schreiben oder?

BlackScorp · 13.09.2010, 13:13

naja ich möchte vom ajax request mir die zufällige geschwindigkeit holen, sowie zufällige soll werte. der user soll anhand seiner reaktion, vesuchen die animation im bestimmten bereich stoppen. und damit dieser bereich durch firebug oder ähnlichem nicht verfälscht wird, wollte ich die prüfung anhand der zeit durchführen.

gibt es vllt eine andere lösung dafür? oder kann ich die overhead ausführungszeit ermitteln und die dann abziehen?

ChrisB · 13.09.2010, 14:03

Zitat:

Zitat von BlackScorp

bei einer animation von 1px pro milisekunde

Solche Werte sind in aktuellen Browsern nicht sinnvoll.

Wie Chriz schon sagte, auch die Ausführungszeit des Codes an sich muss ja irgendwie noch dazu gerechnet werden. Und nicht nur die, auch wenn die JS-Engine die Kontrolle wieder an die Rendering-Engine übergibt, die das ganze darzustellen hat, vergeht auch noch mal ein bisschen Zeit, bis die mit ihrem Job fertig ist.
Das alles ist also vielleicht noch gar nicht zu Ende ausgeführt, und das nächste Interval muss dann „warten“, und so kommt es zu Verschiebungen.

Außerdem - Fernsehen und Kino arbeiten mit 25 bis 30 Bildern pro Sekunde, warum? Weil das menschliche Auge schnellere Veränderungen sowieso nicht wahrnehmen kann, und diese Bildfrequenz schon ausreicht, um den Eindruck flüssiger Bewegung zu simulieren.
Hier also das 30- bis 40-fache für eine Animation im Browser nehmen zu wollen, ist absoluter Blödsinn.

BlackScorp · 13.09.2010, 19:41

es ist ja keine besondere animation, ledeglich ein div verschiebt sich über einen anderen, die leiste ist 200px breit , und es dauert insgesammt 800-2000 milisekunden bis das eine div komplett über das andere verschoben wurde, da zwischen muss es halt durch ein klick angehalten werden.. naja ich denke wenn ich die soll werte grob einrichte, wo es nicht auf milisekunden ankommt, dann sollte mein problem gelößt sein.

danke für eure hilfe

MFG

nikosch · 13.09.2010, 19:57

Abgesehen von den genannten Punkten wird hier auch ziemlich mit der Performance „herumgeaast“

- unnötige globale Variablen für bestimmte Zeitvariablen
- ständig neuer Lookup nach $('.arrow') - das könnte man einmalig hinterlegen
- -1*(start-end) - unnütze mathematische Operation
- end - start wird doppelt berechnet
- is(':animated') - auch das könnte man einfach über ein Flag regeln

Zudem sollte man hier die Reihenfolge umstellen,

Zitat:

PHP-Code:

              $('.arrow').animate().stop();
            time = new Date();
            end = time.getTime();

wenn man schon auf mikrosekundengenaue Anzeigen erpicht ist.

Genau genommen sind

PHP-Code:

              time = new Date();
            xxx = time.getTime();

auch redundant, weil für beide If-Zweige ausgeführt.

BlackScorp · 13.09.2010, 22:07

auch wenn ich die folgenden punkte ausbessere, bleibt trotzdem ein overhead.. wie gesagt wenn ich die sollwerte gröber aufteile, klappt das ganze

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bin noch ein Anfänger mit jquery bitte um hilfe	bomber007	JavaScript, Ajax und mehr	4	19.08.2010 23:34
[Erledigt] jQuery Slider - In eine Richtung sperren	Trainmaster	JavaScript, Ajax und mehr	2	08.08.2010 16:06
[Erledigt] Statistik mit jQuery	DJ_RhoxxZ	JavaScript, Ajax und mehr	6	25.07.2010 17:47
jquery: dialogbox funktioniert nicht	Dreamwatcher	JavaScript, Ajax und mehr	16	22.07.2010 18:22
jQuery findet Element nicht	ByStones	JavaScript, Ajax und mehr	8	11.06.2010 14:03
jQuery Plug scroll to - wie einbetten?	mxxxx	JavaScript, Ajax und mehr	5	24.04.2010 18:12
[Erledigt] Jquery Selektoren	chunky	JavaScript, Ajax und mehr	5	14.02.2010 11:14
Umsetzung von parentNode in jQuery	nikosch	JavaScript, Ajax und mehr	8	03.08.2009 21:25
[Erledigt] jQuery Dateien nachladen	Phoscur	JavaScript, Ajax und mehr	7	14.03.2009 13:44
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
For Schleife mit jQuery	phpbeginner	JavaScript, Ajax und mehr	3	22.11.2008 22:35
build nummer des bs ermitteln ... nur bei microsoft's bs!!!		PHP Tipps 2005-2	2	24.07.2005 15:59
Besucher mit den meisten GB Einträgen ermitteln!		Datenbanken	7	21.04.2005 12:09
CRC Summe einer Datei ermitteln??		PHP Tipps 2004	1	14.10.2004 09:23
[Erledigt] Tabellenname eines Feldes ermitteln		PHP-Fortgeschrittene	3	22.09.2004 15:49

13.09.2010, 10:27
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	jQuery animationszeit ermitteln Hallo leute, ich habe ein kleines Problem. Ich möchte beim klicken auf ein Div eine Animation starten, wenn man noch mal auf den div klickt, soll die animation beendet werden. Danach soll angezeigt werden, wieviele milisekunden zwischen ersten und zweiten klick vergangen sind. Folgenden code habe ich verwendet: javascript: PHP-Code: var time; var start = 0; var end = 0; $('.animationBar').click(function(){ if($('.arrow').is(':animated')){ $('.arrow').animate().stop(); time = new Date(); end = time.getTime(); }else{ time = new Date(); start = time.getTime(); $('.arrow').css('margin-left','0px'); $('.arrow').animate({ marginLeft: '+=199' }, 500,'linear', function() { time = new Date(); end = time.getTime(); $('.display').text(-1(start-end)); }); } if(end -start > 0){ $('.display').text((end-start)); } }); es lauft also eine linie in einer bar von links nach rechts. Ich habe als animationsdauer 500 milisekunden eingestellt. also müsste bei mir nach der animation im display immer 500 stehen. jedoch kriege ich als ergebnis zwischen 502 und 510 und manchmal gibt es im browser kleine laggs und als ergebnis kriege ich 600+. meine fragen sind nun: habe ich denn eine möglichkeit die zeit exakt herauszufinden? und wieso ist die ausgabe größer als das erwartete ergebnis? habe ich an falschen stellen die zeit gespeichert? MFG BlackScorp __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen Geändert von BlackScorp (13.09.2010 um 10:38 Uhr).*


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

13.09.2010, 10:41
Asipak Moderator Registriert seit: 18.07.2005 Beiträge: 4.072	Wo sind die [code]-Tags, Black? Ist es notwendig, laufend ein neues Date-Objekt zu erzeugen? Code: (-1*(start-end)); Das sieht auch etwas wunderlich aus. Vertausche doch einfach Minuend mit Subtrahend.

13.09.2010, 11:07
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	ich muss immer ein neues objekt von date anlegen, sonst gibt mir die funktion getTime() immer den gleichen wert aus und end-start kommt immer 0 raus. ja das mit end-start habe ich später auch gesehen, habs auch geändert. es geht halt nur darum, die exakte diferenz zu ermitteln, wenn es überhaupt möglich ist. ich möchte halt am ende sagen, dass bei einer animation von 1px pro milisekunde ich nach 500 milisekunden bei 500px in einer anzeige befinde . es geht um die sicherheit, ich möchte den aktuellen zeigerwert nicht als wert an ein ajax request schicken sondern nur wie lange es zwischen ersten und zweit klick gedauert hat um auf der serverseite mir den wert zu errechnen. __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen Geändert von BlackScorp (13.09.2010 um 11:15 Uhr).

13.09.2010, 11:26
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Wenn genau 500 rauskaeme, hiesse das ja, dass bestimmte Codefragmente keine Ausfuehrungszeit verbrauchen wuerden. Schliesslich wird sehr viel Code ausgefuehrt (auch in der jQuery-Lib) bevor du an die Stelle mit animate(..., 500, ...) gelangst. Einen Overhead hast du immer, nicht nur durch JS selbst, sondern auch ein Serverhusten kann das verursachen. Wenn du es glaubst besser zu wissen, hindert dich ja niemand daran 500 in das Ergebnisfeld zu schreiben oder? __________________ "Nuschel ich?" - "Was?"

13.09.2010, 13:13
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	naja ich möchte vom ajax request mir die zufällige geschwindigkeit holen, sowie zufällige soll werte. der user soll anhand seiner reaktion, vesuchen die animation im bestimmten bereich stoppen. und damit dieser bereich durch firebug oder ähnlichem nicht verfälscht wird, wollte ich die prüfung anhand der zeit durchführen. gibt es vllt eine andere lösung dafür? oder kann ich die overhead ausführungszeit ermitteln und die dann abziehen? __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

13.09.2010, 19:41
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	es ist ja keine besondere animation, ledeglich ein div verschiebt sich über einen anderen, die leiste ist 200px breit , und es dauert insgesammt 800-2000 milisekunden bis das eine div komplett über das andere verschoben wurde, da zwischen muss es halt durch ein klick angehalten werden.. naja ich denke wenn ich die soll werte grob einrichte, wo es nicht auf milisekunden ankommt, dann sollte mein problem gelößt sein. danke für eure hilfe MFG __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

13.09.2010, 22:07
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	auch wenn ich die folgenden punkte ausbessere, bleibt trotzdem ein overhead.. wie gesagt wenn ich die sollwerte gröber aufteile, klappt das ganze __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen