• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

meine animation Funktion bitte testen

Ehhhhhm nein

Beispiel
Hier wird evaluiert
var a = "eins"; var b = {}; b.eins = "das ist ein Text"; var newFunc = new Function("", "alert(b."+a+")"); newFunc();

Hier nicht, oder??
var a = "eins"; var b = {}; b.eins = "das ist ein Text"; var newFunc = function() { alert("b."+a) }; newFunc();

vielleicht erkennst du nun den Unterschied

Noch ein Beispiel:
Hier wird evaluiert
var a = "eins"; var b = {}; b.eins = "das ist ein Text"; alert(eval("b."+a));

Hier nicht
var a = "eins"; var b = {}; b.eins = "das ist ein Text"; alert("b."+a);

Noch eins:
Hier wird evaluiert:
var a = "eins"; var b = {}; b.eins = "1000"; setTimeout("alert(parseInt(b."+a+"))",10);
Hier nicht
var a = "eins"; var b = {}; b.eins = "1000"; alert(parseInt("b."+a));

Hier noch eins zu einer normaler Funktion mit Parameterübergabe
Hier wird evaluiert
var a = "eins"; var b = {}; b.eins = "1000"; var newFunc = function(test) { alert(test) }; setTimeout("newFunc(b."+a+")",10);
wird nicht evaluiert
var a = "eins"; var b = {}; b.eins = "1000"; var newFunc = function(test) { alert(test) }; newFunc("b."+a);


Wie kommst du jetzt darauf das für mich alle Funktionen zur eval Familie gehören???

Ich meine die Logik springt einem da doch ganz offensichtlich ins Gesicht ^^
die Funktionen die Code evaluieren gehören zur eval Familie, grade weil sie evaluieren,
ich hab auch nochmal nachgeforscht, cih hab die seite grade nicht zur Hand Poste sie aber dann nochmal
und zwar eröffnen die zur eval Familie gehörenden Funktionen tatsächlich einen neuen thread, eben einen
simultanen so wie auf dieser einen Seite beschrieben, eine neue Instanz der JSEngine muss dafür gestartet
werden egal ob code diese Funktionen Code zum evaluieren enthalten oder nicht, dies wird dann nämlich erst
geprüft, das ist schon so ;)
 
Zuletzt bearbeitet:
Jonny2009 schrieb:
Hier wird evaluiert
Zum Vergrößern anklicken....

erst mal vorweg, was bedeutet evaluiert?

Jonny2009 schrieb:
var a = "eins"; var b = {}; b.eins = "das ist ein Text"; var newFunc = new Function("", "alert(b."+a+")"); newFunc();
var a = "eins"; var b = {}; b.eins = "das ist ein Text"; var newFunc = function() { alert("b."+a) }; newFunc();
Zum Vergrößern anklicken....
beide anweisungen erzeugen bei ausführung dynamisch ein function-objekt
vielleicht erkennst du nun die gemeinsamkeit
du vergleichst äpfel mit birnen.
im 1. alert ist b die variable b, im 2. ein string "b."

Jonny2009 schrieb:
var a = "eins"; var b = {}; b.eins = "das ist ein Text"; alert(eval("b."+a));
var a = "eins"; var b = {}; b.eins = "das ist ein Text"; alert("b."+a);
Zum Vergrößern anklicken....
du vergleichst wieder äpfel mit birnen.
natürlich rufst du in der 1. anweisung eval auf und in der 2. nicht. natürlich hat eval einen overhead, wie jeder funktionsaufruf auch, da ein scopewechsel stattfindet.

Jonny2009 schrieb:
var a = "eins"; var b = {}; b.eins = "1000"; setTimeout("alert(parseInt(b."+a+"))",10);
var a = "eins"; var b = {}; b.eins = "1000"; alert(parseInt("b."+a));
Zum Vergrößern anklicken....
äpfel und birnen

Jonny2009 schrieb:
Ich meine die Logik springt einem da doch ganz offensichtlich ins Gesicht ^^
Zum Vergrößern anklicken....
wenn du verwechselst den zugriff auf strings und variablen mit evaluieren. oder das ist für dich evaluieren, dann haben wir uns falsch verstanden und alles ist ok.

var a = "eins";
var b = {eins:"text"};

alert(b.a);
alert(b[a]);
alert(b.eins);

Jonny2009 schrieb:
die Funktionen die Code evaluieren gehören zur eval Familie, grade weil sie evaluieren,
Zum Vergrößern anklicken....
das klingt logisch ;-)

Jonny2009 schrieb:
ich hab auch nochmal nachgeforscht, cih hab die seite grade nicht zur Hand Poste sie aber dann nochmal
und zwar eröffnen die zur eval Familie gehörenden Funktionen tatsächlich einen neuen thread, eben einen
simultanen so wie auf dieser einen Seite beschrieben, eine neue Instanz der JSEngine muss dafür gestartet
werden egal ob code diese Funktionen Code zum evaluieren enthalten oder nicht, dies wird dann nämlich erst
geprüft, das ist schon so
Zum Vergrößern anklicken....
ich kann auch eine seite erstellen und dort behaupten js gibt es nicht, das muss noch lange nicht stimmen
 
hier mal ein auszug aus der ECMA-262 (schon etwas älter - 3rd Edition, da hier übersichtlicher)

10.1.1 Function Objects

There are two types of Function objects:

* Program functions are defined in source text by a FunctionDeclaration or created dynamically either by using a FunctionExpression or by using the built-in Function object as a constructor.
* Internal functions are built-in objects of the language, such as parseInt and Math.exp. An implementation may also provide implementation-dependent internal functions that are not described in this specification. These functions do not contain executable code defined by the ECMAScript grammar, so they are excluded from this discussion of execution contexts.

10.1.2 Types of Executable Code

There are three types of ECMAScript executable code:

* Global code is source text that is treated as an ECMAScript Program. The global code of a particular Program does not include any source text that is parsed as part of a FunctionBody.
* Eval code is the source text supplied to the built-in eval function. More precisely, if the parameter to the built-in eval function is a string, it is treated as an ECMAScript Program. The eval code for a particular invocation of eval is the global code portion of the string parameter.
* Function code is source text that is parsed as part of a FunctionBody. The function code of a particular FunctionBody does not include any source text that is parsed as part of a nested FunctionBody. Function code also denotes the source text supplied when using the built-in Function object as a constructor. More precisely, the last parameter provided to the Function constructor is converted to a string and treated as the FunctionBody. If more than one parameter is provided to the Function constructor, all parameters except the last one are converted to strings and concatenated together, separated by commas. The resulting string is interpreted as the FormalParameterList for the FunctionBody defined by the last parameter. The function code for a particular instantiation of a Function does not include any source text that is parsed as part of a nested FunctionBody.

...

10.2 Entering An Execution Context

Every function and constructor call enters a new execution context, even if a function is calling itself recursively. Every return exits an execution context. A thrown exception, if not caught, may also exit one or more execution contexts.

When control enters an execution context, the scope chain is created and initialised, variable instantiation is performed, and the this value is determined.

The initialisation of the scope chain, variable instantiation, and the determination of the this value depend on the type of code being entered.
10.2.1 Global Code

* The scope chain is created and initialised to contain the global object and no others.
* Variable instantiation is performed using the global object as the variable object and using property attributes { DontDelete }.
* The this value is the global object.

10.2.2 Eval Code

When control enters an execution context for eval code, the previous active execution context, referred to as the calling context, is used to determine the scope chain, the variable object, and the this value. If there is no calling context, then initialising the scope chain, variable instantiation, and determination of the this value are performed just as for global code.

* The scope chain is initialised to contain the same objects, in the same order, as the calling context's scope chain. This includes objects added to the calling context's scope chain by with statements and catch clauses.
* Variable instantiation is performed using the calling context's variable object and using empty property attributes.
* The this value is the same as the this value of the calling context.

10.2.3 Function Code

* The scope chain is initialised to contain the activation object followed by the objects in the scope chain stored in the [[Scope]] property of the Function object.
* Variable instantiation is performed using the activation object as the variable object and using property attributes { DontDelete }.
* The caller provides the this value. If the this value provided by the caller is not an object (note that null is not an object), then the this value is the global object.
 
Wie gesagt, dass ein String als Parameter bei der setTimeout Funktion erst mit new Function o.ä. in einen JS Code umgewandelt werden muss, ist uns bekannt, aber was ist an einer Funktion eine Familie?

Aber um auf die eigentlich Frage zurück zu kommen, setTimeout kostet so gut wie keine Zeit, wir Bewegungen uns bei dieser Frage im Mikrosekundenbereich. Was Zeit kostet, ist eine Animation und eval im Timeout. Insofern ist das beharren auf einen einzigen Timer überflüssig und bringt keinen erkennbaren Vorteil.

Ich hab mal in meiner Testseite http://static.jstruebig.de/tween.html 50 sich bewegende und gleichzeitig die Farbe änderte Elemente eingebaut. Im Firefox ruckelt es ein bisschen, im Chrome läuft es flüssig. Ich hab aber einen relativ neuen Rechner.

Die andere These, die du aufgeworfen hast, dass eval einen Thread startet, halte ich für falsch. Zumal es auf der gleichen Seite steht, wo behauptet wird, dass Timer Zeit kosten, was Unsinn ist.

Wie der Prozess bei eval genau abläuft, könnte man mal recherchieren, aber es gibt keinen Widerspruch, dass eval extrem Zeitintensiv ist.
Wie kann man testen, ob es so ist, wie du (bzw. die Seite mediaevent) sagst?

[Nachtrag:] Oh Hesst hat es gemacht, muss ich aber erst mal lesen und verstehen.

Ein Zeichen, dass es nicht so sein könnte ist, dass im eval String ja alle Variabeln der Umgebung zu Verfügung stehen. Nach meinem Verständnis dürfte das bei einem Thread nicht so sein.

Mal ein Beispiel, was ich meine:
Code: 
		var str = 'alert(x)';
		test(1);
		test(2);
		
		function test(x){
			eval(str);
		}
Woher weiß der "eigene Thread" was x ist?

Insofern vermute ich einen anderen Mechanismus hinter eval. Aber wie gesagt, dass war eigentlich gar nicht das Thema, es ging ja um den Timeout.

Durch die zwanghafte Verwendung eines einzigen Timeout ist dein Code erheblich komplizierter geworden, als er sein müßte. Darauf wollte ich hinweisen, da meine Tween Klasse nur wenige Zeilen umfaßt und auch mit wenigen Zeilen um die Funktionalität erweitert werden kann. Für mich heißt das, du hast es dir sehr kompliziert gemacht und vermutlich auch manches sehr umständlich gelöst. Die 77 KB an sich sind kein Thema, das habe ich auch nicht damit gemeint, die Größe ist für mich lediglich ein Anhaltspunkt gewesen, um einen Maßstab anzugeben, wie umständlich dein Code evtl. ist.
 
Zuletzt bearbeitet:
Naja, wiegesagt,
50 Animationen gleichzeitig wird man nie benötigen schätze ich sollte man auch nicht, ich hab ja oben geschrieben das das Ergebnis das wichtigste ist :).

Familie ist jetzt mal ein Begriff man kann auch eval Funktionen sagen,
hmm was heisst evaluieren?? code der wie eval verarbeitet wird, ich nannte es mal evaluieren ^^

man sagt das die Funktionen die aus Strings in einen ausführbaren code umwandel zur eval Familie bzw zu den eval Funktionen gehören und mit
Ihnen vorsichtig umgegangen werden muss

@hesst wie du anhand meiner Beispiele sehen kannst, kann man das mit all den Funktionen oben,
du sagstest das für mich alle funktionen zur eval Familie gehören, dann erläutere mir mal mit
welchen anderen Funktionen ausser eval, new Function, setTimeout und setInterval Strings zu einem
ausführbaren Code machen kannst, du hast da meine Beispiele nicht verstanden,
da es in meinen Beispielen darum ging das die Funktionen die wie ich es nenne den Code evaluieren
(Strings in ausführbahren Code umwandeln).
Damit habe ich dir nur wiedersprochen und wollte dir nur zeigen das ich weiss wovon ich da rede,
und das nicht jede Funktion für mich zur eval Familie gehört.
 
Jonny2009 schrieb:
hmm was heisst evaluieren?? code der wie eval verarbeitet wird, ich nannte es mal evaluieren ^^
Zum Vergrößern anklicken....
nur code der durch eval verarbeitet wird, wird dann evaluiert

Jonny2009 schrieb:
man sagt das die Funktionen die aus Strings in einen ausführbaren code umwandel zur eval Familie bzw zu den eval Funktionen gehören und mit
Ihnen vorsichtig umgegangen werden muss
Zum Vergrößern anklicken....
jede funktiion wird aus einem string in ausführbaren code umgewandelt, die quelle liegt ja textuell vor. manche früher andere später dynamisch zur laufzeit.
 
@ein schlauer
ja super, stimmt, als ich das bei mir testete(also mein altes script), hatte es aber saumässig geruckelt bei 10-15 animationen,
das waren aber nicht 10 - 15 Animation grade nochmal nachgeschaut, es waren 15 Elemente die jeweils höhe, breite, position, hintergrundfarbe, textfarbe, rahmenfarbeLinks,
rahmenfarbeRecht, rahmenfarbeOben, rahmenfarbeUnten, rahmenbreiteLinks,rahmenbreiteRechts, rahmenbreiteOben, rahmenbreiteUnten.
dabei wurde pro Animation (CSS-Eigenschaft) ein Interval gestartet und das mal 15 Elementen, das macht 13 x 15 = 195 Timeouts, dann ist es kein wunder wenn da was ruckelt ^^.
 
@hesst
ja ist doch ok ^^, eigentlich ist mir das mit dem eval egal, hier ging es um Animationen, damit jetzt ruhe ist, du hast recht ^^
 
hesst schrieb:
doch, wie bereits in #38 erwähnt bringt das einen vortein, hat aber nichts mit js zu tun. hatten wir auch schon mal hier
Zum Vergrößern anklicken....
Hmm, bei mir ist die dortige Variante mit den vielen timer etwas flüssiger. Aber das ist natürlich nur gefühlt. Beide Varianten hakeln immer mal wieder, aber die mit einem Timer ist dann wenn sich alle Elemente bewegen etwas flüssiger. Vielleicht haben die Browser seit 2010 da was geändert?
 
Jonny2009 schrieb:
dabei wurde pro Animation (CSS-Eigenschaft) ein Interval gestartet und das mal 15 Elementen, das macht 13 x 15 = 195 Timeouts, dann ist es kein wunder wenn da was ruckelt ^^.
Zum Vergrößern anklicken....
Ja, aber das liegt nicht an dem Aufruf der Timeouts, sondern daran, was du dann machst und ob du Animationen in einem globalen Timeout oder vielen einzelnen machst, spielt nach meiner Erfahrung keine Rolle (s. Antwort an Hesst)
 
Bei mir läuft das:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<script type="text/javascript" src="http://kkjs.kkapsner.de/modules/kkjs.load.js?modules=Animation,tween"></script>
<script type="text/javascript">
kkjs.event.onWindowLoad(function(){
	var size = kkjs.DOM.getWindowSize();
	kkjs.css.$("div").forEach(function(div){
		kkjs.css.set(div, {top: div.offsetTop + "px", left: div.offsetLeft + "px"});
		var time = 1 + Math.random() * 2;
		var ani = new kkjs.Animation(div, "top", kkjs.tweens.easeInOut, time);
		ani.runCSSTo((size.height - div.offsetHeight) * Math.random());
		ani = new kkjs.Animation(div, "left", kkjs.tweens.bounce, time);
		ani.runCSSTo((size.width- div.offsetWidth) * Math.random());
	});
});
</script>
<style type="text/css">
div {
	position: absolute;
	height: 20px;
	width: 20px;
	border: 1px dashed red;
	left: 50%;
	top: 50%;
}
</style>
</head>
<body>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</body>
</html>
(80 unabhängige Timeouts) nur im IE9as7 nicht flüssig.
 
nice, ich habs verstanden, das mehrere Timeouts nicht flüssig laufen ist ein Gerücht :)

Anhang anzeigen animation_new.zip
ich hab meine animations Funktion nun umgeschrieben, beinhaltet aber noch nicht die addAnimation Funktion, mit
der ich dann color usw einbringen kann, es funktionieren nun alle css Eigenschaften die mit zahlen gesetzt werden können
ausser opacity, dafür muss ich das mit dem Filter noch einbauen, sonst aber dürften fast alle Eigenschaften unterstützt werden,
mit 7 kb kam ich nicht hin, bis jetzt sind es 10 kb und es müssen noch ein paar Sachen dazu programmiert werden,
aber ich bin dann schonmal von der Riesen Größe weg, vielleicht könnt ihr ja mal drüberschauen.

Diese möglichkeit ist nun schon um einiges schlanker als meine zuvor programmierte Funktion und unterstützt von
Haus aus sogut wie alle CSS Eigenschaften wie schon erwähnt die man mit Zahlen festlegen kann,
dennoch sind viele Sachen noch nicht enthalten, zum Beispiel wenn borderWidth geändert werden soll besteht dies ja aus borderTopWidth, borderBottomWidth,
borderLeftWidth und borderRightWidth, ansonsten kann die momentane dicke ja nicht festgelstellt werden genauso mit borderColor das dann noch kommt, margin
oder padding.
Desweiteren kann das ganze nur mit Pixeln umgehen, hat einer von euch schon so ein umrechnungsscript von em, pt, cm usw zu px vielleicht kann mir da auch nochmal jemand helfen.

Vielen Dank schonmal im vorraus :)
Jonny
 
also ichhabs jetzt auc mal mit 30 div elementen ausprobiert,
bei jedem div werden folgende Animation ausgeführt, beim drüberfahren:
width:800,
height: 200,
borderTopWidth: 20,
fontSize: 40,

beim mouseover:
width: 500,
height: 100,
borderTopWidth: 0,
fontSize: 20,

also es werden alle Animation auf alle Divs angewendet, egal über welches man fährt oder mousoutet ^^

Bis dahin läuft es flüssig, füge ich dann aber noch eine Eigenschaft hinzu fängt es an zu ruckeln

Ich hatte firebug unten an xD

Jetzt geht es sogar mit 60 Divs und einer Css Eigenschaft mehr, ab da fäng das ruckeln an,

60 x 5 = würde pro Animation 300 gleichzeitige Timeouts heißen,

ich kann die Testdatei auch mal uploaden wer sehen will das es funktioniert, es ruckelt ab und an minimal aber es hält sich in Grenzen.


Aber mal ganz ehrlich Leute, ist doch völlig egal, wer baut denn soviele Animationen auf einer Seite ein ^^, das wäre doch sehr unproffesional


[edit]
OK ich hab euch das Beispiel diesmal mit 80 divs hochgeladen, wo folgende eigenschaften animiert werden:
width
heigh
borderTopWidth
marginLeft
paddingTop
paddingLeft
fontSize

mal abgesehen davon das die neu programmierte animation Funktion noch ein wenig verbackt ist, finde ich läuft es immer noch relativ flüssig,
ich sage relativ ^^.

Nur mal interesse halber würde mich mal interessieren, wie flüssig mein Beispiel mit euren Funktionen laufen, ob die Timeouts da wirklich
keine Probleme machen, oder eventuell mit mehreren timern das ganze sogar noch flüssiger läuft.

Anhang anzeigen animation_bsp.zip
 
Zuletzt bearbeitet:
So habs jetzt nochmal seperat getestet, und zwar mehrere Timeouts gleichzeitig gestartet:

HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">         

        function test () {
        	for(var i = 1000000; 0 <= i; --i) {
        		
        	}
        	document.getElementById("testbox").innerHTML = new Date().getTime() - time;
        }
        
        var time = new Date().getTime();
        window.onload = function () {
           
        	for(var i = 5; 0 <= i; --i ) {
        		window.setTimeout(test, 10);
        	}
        	
        }
        
        </script>
    </head>
    <body>
        <div id="testbox">
        </div>
    </body>
</html>

und einmal mit einem Timeout:

HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">         

        function test () {
        	for(var i = 1000000; 0 <= i; --i) {
        		
        	}
        	document.getElementById("testbox").innerHTML = new Date().getTime() - time;
        }
        
        var time = new Date().getTime();
        window.onload = function () {
            
        
       		window.setTimeout( function() {
       			for(var i = 5; 0 <= i; --i ) {
       			    test();
       			}
       		}, 10);
        	
        }
        
        </script>
    </head>
    <body>
        <div id="testbox">
        </div>
    </body>
</html>


Und ich muss echt sagen das wundert mich doch sehr aber wenn man das mehrmals testet,
so steht sogar schnell fest das mehrere gleichzeitige Timeouts so auch Intervalle nehme ich an,
laufen tatsächlich wenn auch in diesem Fall nur minimal schneller, ich denke desdo mehr Animationen
es laufen das der Geschwindigkeitsvorteil noch größer ist, mann mann ich glaube nie wieder all das was
ich so im Internet lese, obwohl die Seite einen ordentlichen Eindruck gemacht hatte :S
 
Jonny2009 schrieb:
so steht sogar schnell fest das mehrere gleichzeitige Timeouts so auch Intervalle nehme ich an,
laufen tatsächlich wenn auch in diesem Fall nur minimal schneller,
Zum Vergrößern anklicken....
das sind messfehler, ausserdem willst du ja die timer testen, das heisst, du musst zum test viele timer haben mit wenig laufzeit, du hast wenig timer mit langer laufzeit getestet.
 
Hmm, stimmt, ich weiss nicht, wie kann ich es am besten messen, so??

HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">         

        function test () {
        	for(var i = 10000; 0 <= i; --i) {
        		
        	}
        }
        
        var b = 0;
        var c = 0;
        var d = 0;
        var e = 0;
        var f = 0;
        var g = 0;
        var h = 0;
        var i = 0;
        var j = 0;
        var k = 0;
        function oneTimeout () {
        	if(b !== 500) {
        		   b++;
        		   d++;
        		   c++;
        		   d++;
        		   e++;
        		   f++;
        		   g++;
        		   h++;
        		   i++;
        		   j++;
        		   k++;
	        	document.getElementById("testbox").innerHTML = new Date().getTime() - time;
        		   window.setTimeout(oneTimeout,10);
        	}
        }
        
        
        function moreTimeouts () {
        	window.setTimeout(function() { if(b<500) { b++; document.getElementById("testbox").innerHTML = new Date().getTime() - time; moreTimeouts() } }, 10);
        	window.setTimeout(function() { if(c<500) { c++; document.getElementById("testbox").innerHTML = new Date().getTime() - time;  moreTimeouts() } }, 10);
        	window.setTimeout(function() { if(d<500) { d++; document.getElementById("testbox").innerHTML = new Date().getTime() - time; moreTimeouts() } }, 10);
        	window.setTimeout(function() { if(e<500) { e++; document.getElementById("testbox").innerHTML = new Date().getTime() - time; moreTimeouts() } }, 10);
        	window.setTimeout(function() { if(f<500) { f++; document.getElementById("testbox").innerHTML = new Date().getTime() - time;  moreTimeouts() } }, 10);
        	window.setTimeout(function() { if(g<500) { g++; document.getElementById("testbox").innerHTML = new Date().getTime() - time;  moreTimeouts() } }, 10);
        	window.setTimeout(function() { if(h<500) { h++; document.getElementById("testbox").innerHTML = new Date().getTime() - time; moreTimeouts() } }, 10);
        	window.setTimeout(function() { if(i<500) { i++; document.getElementById("testbox").innerHTML = new Date().getTime() - time; moreTimeouts() } }, 10);
        	window.setTimeout(function() { if(j<500) { j++; document.getElementById("testbox").innerHTML = new Date().getTime() - time; moreTimeouts() } }, 10);
        	window.setTimeout(function() { if(k<500) { k++; document.getElementById("testbox").innerHTML = new Date().getTime() - time; moreTimeouts() } }, 10);
            
        }
        
        var time = new Date().getTime();
        window.onload = function () {
          //oneTimeout();
          moreTimeouts();
        }
        
        </script>
    </head>
    <body>
        <div id="testbox">
        </div>
    </body>
</html>

Ist das so richtig? so sind die mehr Timeouts immernoch schneller,
ich glaube irgendwie mache ich das falsch
 
Jonny2009 schrieb:
Ist das so richtig? so sind die mehr Timeouts immernoch schneller,
ich glaube irgendwie mache ich das falsch
Zum Vergrößern anklicken....

hab ich auch festgestellt, mit mehreren timeouts hat man einmal eine schleife um die timeouts der rest lauft eventgesteuert
mit einem timeout hat man jedesmal eine schleife um die funktionalitat.
die iteration in der schleife scheint für die längere laufzeit verantwortlich zu sein.

edit: selbst im IE7

1 timer

Code: 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">         
        var maxCount = 100;
        var maxTimer = 500;
        function test (idx, count)
        {
            count = count || maxCount;
            for(var i = 0; i < maxTimer; i++) {
              document.getElementById("testbox").innerHTML = "Durchlauf " + (maxCount - count) + ": Timer " + i + ": time:" + (new Date().getTime() - time) + "<br>";
            }
            if (--count)
            {
              window.setTimeout(function(){test(0, count);}, 100);
            }
        }
        
        var time = new Date().getTime();
        window.onload = function () {
              window.setTimeout(function(){test(0);}, 100);
        }
        
        </script>
    </head>
    <body>
        <div id="testbox">
        </div>
    </body>
</html>

n timer
Code: 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">         
        var maxCount = 100;
        var maxTimer = 500;
        function test (idx, count)
        {
            count = count || maxCount;
            document.getElementById("testbox").innerHTML = "Durchlauf " + (maxCount - count) + ": Timer " + idx + ": time:" + (new Date().getTime() - time) + "<br>";
            if (--count)
            {
              window.setTimeout(function(){test(idx, count);}, 100);
            }
        }
        
        var time = new Date().getTime();
        window.onload = function () {
           
            for(var i = 0; i < maxTimer; i++) {
                window.setTimeout((function(idx){return function(){test(idx);}})(i), 100);
            }
            
        }
        
        </script>
    </head>
    <body>
        <div id="testbox">
        </div>
    </body>
</html>
 
Zuletzt bearbeitet:
Jonny2009 schrieb:
Und ich muss echt sagen das wundert mich doch sehr aber wenn man das mehrmals testet,
so steht sogar schnell fest das mehrere gleichzeitige Timeouts so auch Intervalle nehme ich an,
laufen tatsächlich wenn auch in diesem Fall nur minimal schneller, ich denke desdo mehr Animationen
es laufen das der Geschwindigkeitsvorteil noch größer ist, mann mann ich glaube nie wieder all das was
ich so im Internet lese, obwohl die Seite einen ordentlichen Eindruck gemacht hatte :S
Zum Vergrößern anklicken....
U.U. kann es sein, dass das früher mal etwas anders war. Hier wurde in den letzten Jahren in den Browsern viel optimiert. Aber was schon immer nicht gestimmt hat ist, dass Timeouts irgendwas mit Threads zu tun haben.

Und nochmal, weil deine Formulierung wieder so klingt, Timeouts "laufen" nicht. Das sind Hintergrundprozesse im Browser (resp. des Betriebssystem).

Wie das im Detail geregelt wird, weiß ich auch nicht. Aber wie schon erwähnt, dass sind keine Dinge, wo du dir Gedanken um Laufzeiten machen musst. Es gibt soviele Events (bzw. intern heißen die Interrupts) die permanent jede Aktion Überwachen. Sei es die Tastatur, die Maus, alle Bedienelemente der Oberfläche, usw. usf., wenn das Zeit kosten würde müßten Computer saulahm sein.

Alles wovon du sprichst, was die Skripte langsam macht, ist das was als Aktion NACH dem Timeout passiert. Animationen ist das was im Browser langsam sind. Und das ruckeln ist der Effekt, dass der Browser viele Dinge im Hintergrund macht, die du normalerweise nicht mitbekommst und wenn ein Skript dem Browser die komplette Rechenzeit nimmt, muss er ab und zu mal "dazwischen funken".
 
ja naja wenn Timeouts und Intervalle so geregelt sind, warum kann man dann Javascript nicht einfach multithreated machen ^^, das wäre doch viel logischer.
Und wieder was dazugelernt :)

Wenn das browserintern so geregelt ist, regelt ein Browser die Timeouts und Intervalle aber immer nur für ein Tab, den öffnet mal mit strg+t während einer 10 sekündigen Animation einen Tab und klickt dann mal nach 5-10 Sekunden wieder auf den tab mit der Animation, dann sieht man das die intervalle erst dann fortgeführt werden.
Und nochetwas verstehe ich nicht ganz, wenn es Browserintern geregelt wird, was ich mir eigentlich doch mittlerweile sehr gut vorstellen kann,
so verstehe ich nicht warum ein Timer nicht Zeitgenau (Beispiel: setInterval(xFunc, 10) ) dann auch alle 10 ms ausgeführt werden kann, sondern in den meisten Fällen verzögerungen auftreten, weil der Interval oder Timeout noch die Differenz die der auszuführende Code braucht mitbeinhatet, so könnte doch wenn es Browsergesteuert ist,
wirklich alle 10 ms aufgerufen werden ohne Rücksicht auf den Code der ausgeführt wird.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben