setTimeout Speed in IE

I currently have an object, where it slides vertically using the setTimeout function.

It just uses a function that moves the position up 1px, every 100th of a second (i think its 100th)


setTimeout("myfunc",10);

and repeats until its at the desired spot

My problem is, in Chrome and Firefox, it goes at a very snappy speed, but in IE, its noticeably slower.

http://shanereustle.com/sites/martinmoto/

You can view the sliding going on there.

Does anybody have any idea to speed up IE?

I was thinking something like, if( IE ) tripple speed , or something like that

thanks!

 

yes

for example, setTimeout("slide("+newpos+","+end+")",20);

basically this is a big mindfuck with the js interpreter. you are using a string here. when you use a string, the js interpreter launches a new instance and evaluates what it does - which will eventually return a pointer to a function. not only that but before the launch of the instance to evaluate the string, it spends time composing the actual string as well as "slide(" + newpos + "," + end + ")" - this is not the fastest way to concatenate a string - use += - look it up as "string performance improvements javascript" or something.

the delay in IE is due to the interpreter being crap - typically it won't be noticed but in your case, you do things every 10 or 20 ms and the delay stacks up.

there is a marginal to fair performance gain to be had here if you use a pointer to an anonymous function instead. for instance:

var foo = setTimeout((function() {
    slide(newpos, end);
}, 20);

PHP:

this _SHOULD_ perform faster.

remember: setTimeout("myfunc",10); -> much slower than setTimeout(myfunc,10); as it has no evaluation! timers will always do _some_ evaluating - so try to use as few as possible and make sure you clear the old ones with clearTimeout.

if you repetitively move, consider setInterval which self stops after reaching a goal. for example,

var moveTimer = setInterval((function() {
    // move image to currentY
    currentY--;
    if (currentY == endPosY) // stop it, we are far enough
        clearInterval(moveTimer);
}, 20);

PHP:

as a whole, I would recommend that you refactor the code a bit and stop using function based parameters / arguments. what I mean by that is, for each animation / cross fade etc, you will have standard parameters that you modify or compare against: currentX, currentY, endPosY etc. just declare them in the global scope and the functions will be able to access them without the parameters.

you could also use them as shared properties of an object, for instance:

var mover = {
    currentY: 0,
    currentFile: null,
    move: function() {
        // do something with this.currentY, like reduce it until it reaches blah
    },
    pause: function() {
        // call this on a mouseover or end of cycle, basically wait and restart by loading a new image and calling this.move();
    }
};

PHP:

if you take the global scope var approach, u'd set something like var currentX, currentY, endPosY etc; and two standalone functions move() and stop(). then call the functions w/o params and evals as setTimeout(move, 20); or var mytimer = setInterval(move, 20);

http://fragged.org/dev/scroller.php -> look at this scroller class I have written, using shared data and methods - it's for mootools but the principles in pseudo code are still valid (well, not the class structure, native js is less flexible than mootools).

good luck