Ankündigung

Einklappen
Keine Ankündigung bisher.

jQuery animationszeit ermitteln

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 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
    apt-get install npm -> npm install -g bower -> bower install <package> YOLO https://www.paypal.me/BlackScorp | Mein Youtube PHP Kanal: https://www.youtube.com/c/VitalijMik


  • #2
    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.
    http://hallophp.de

    Kommentar


    • #3
      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.
      apt-get install npm -> npm install -g bower -> bower install <package> YOLO https://www.paypal.me/BlackScorp | Mein Youtube PHP Kanal: https://www.youtube.com/c/VitalijMik

      Kommentar


      • #4
        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?
        "Mein Name ist Lohse, ich kaufe hier ein."

        Kommentar


        • #5
          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?
          apt-get install npm -> npm install -g bower -> bower install <package> YOLO https://www.paypal.me/BlackScorp | Mein Youtube PHP Kanal: https://www.youtube.com/c/VitalijMik

          Kommentar


          • #6
            Zitat von BlackScorp Beitrag anzeigen
            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.

            Kommentar


            • #7
              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
              apt-get install npm -> npm install -g bower -> bower install <package> YOLO https://www.paypal.me/BlackScorp | Mein Youtube PHP Kanal: https://www.youtube.com/c/VitalijMik

              Kommentar


              • #8
                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,
                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.
                --

                „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                --

                Kommentar


                • #9
                  auch wenn ich die folgenden punkte ausbessere, bleibt trotzdem ein overhead.. wie gesagt wenn ich die sollwerte gröber aufteile, klappt das ganze
                  apt-get install npm -> npm install -g bower -> bower install <package> YOLO https://www.paypal.me/BlackScorp | Mein Youtube PHP Kanal: https://www.youtube.com/c/VitalijMik

                  Kommentar

                  Lädt...
                  X