php.de

Zurück   php.de > Webentwicklung > JavaScript, Ajax und mehr

JavaScript, Ajax und mehr dynamisches Scripten und Interaktion auf Clientebene

Antwort
 
LinkBack Themen-Optionen Thema bewerten
Alt 13.09.2010, 10:27  
Erfahrener Benutzer
 
Registriert seit: 25.09.2009
Beiträge: 2.114
PHP-Kenntnisse:
Fortgeschritten
BlackScorp wird schon bald berühmt werdenBlackScorp wird schon bald berühmt werden
Standard 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).
BlackScorp ist offline   Mit Zitat antworten
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 13.09.2010, 10:41  
Moderator
 
Benutzerbild von Asipak
 
Registriert seit: 18.07.2005
Beiträge: 4.072
Asipak sorgt für eine eindrucksvolle AtmosphäreAsipak sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Asipak ist offline   Mit Zitat antworten
Alt 13.09.2010, 11:07  
Erfahrener Benutzer
 
Registriert seit: 25.09.2009
Beiträge: 2.114
PHP-Kenntnisse:
Fortgeschritten
BlackScorp wird schon bald berühmt werdenBlackScorp wird schon bald berühmt werden
Standard

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).
BlackScorp ist offline   Mit Zitat antworten
Alt 13.09.2010, 11:26  
Moderator
 
Benutzerbild von Chriz
 
Registriert seit: 11.05.2008
Beiträge: 6.266
Chriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer Anblick
Standard

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?"
Chriz ist offline   Mit Zitat antworten
Alt 13.09.2010, 13:13  
Erfahrener Benutzer
 
Registriert seit: 25.09.2009
Beiträge: 2.114
PHP-Kenntnisse:
Fortgeschritten
BlackScorp wird schon bald berühmt werdenBlackScorp wird schon bald berühmt werden
Standard

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
BlackScorp ist offline   Mit Zitat antworten
Alt 13.09.2010, 14:03  
Moderator¹
 
Registriert seit: 28.03.2010
Beiträge: 7.470
PHP-Kenntnisse:
Fortgeschritten
ChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer AnblickChrisB ist ein wunderbarer Anblick
Standard

Zitat:
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.
__________________
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
ChrisB ist offline   Mit Zitat antworten
Alt 13.09.2010, 19:41  
Erfahrener Benutzer
 
Registriert seit: 25.09.2009
Beiträge: 2.114
PHP-Kenntnisse:
Fortgeschritten
BlackScorp wird schon bald berühmt werdenBlackScorp wird schon bald berühmt werden
Standard

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
BlackScorp ist offline   Mit Zitat antworten
Alt 13.09.2010, 19:57  
moderatives Dielektrikum
 
Benutzerbild von nikosch
 
Registriert seit: 21.05.2008
Beiträge: 35.987
PHP-Kenntnisse:
Fortgeschritten
nikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunftnikosch hat eine strahlende Zukunft
Standard

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.
__________________
--
One pixel is still too big. Please make it smaller. ASAP.

Initiative Mittelstand.
Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers.
--
nikosch ist offline   Mit Zitat antworten
Alt 13.09.2010, 22:07  
Erfahrener Benutzer
 
Registriert seit: 25.09.2009
Beiträge: 2.114
PHP-Kenntnisse:
Fortgeschritten
BlackScorp wird schon bald berühmt werdenBlackScorp wird schon bald berühmt werden
Standard

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
BlackScorp ist offline   Mit Zitat antworten
Antwort


Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an
Gehe zu

Ä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

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
jquery zeit messen, jquery zeit, jquery animation abwarten, jquery zeit ermitteln, jquery zeit stoppen, javascript ausführungszeit ermitteln, jquery warten bis animation fertig, jquery zeit zwischen 2 klicks messen, jquery animate zeit, jquery animate abwarten, jquery animation zeit, warten bis function fertig jquery, jquery zeit warten, jquery aktuelles datum ermitteln, jquery zahlen animieren, jquery animation frequenz, jquery time animation, animation abwarten jquery, jquery zeitangaben, anmimation mit zeit jquery

Alle Zeitangaben in WEZ +2. Es ist jetzt 09:53 Uhr.




Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum