Databases
StackOverflow2013
Postsdbo
POWhy do multiple setTimeout() calls cause so much lag?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy do multiple setTimeout() calls cause so much lag?
    text
    copied!<p>I have a complex animation sequence involving fades and transitions in JavaScript. During this sequence, which consists of four elements changing at once, a <code>setTimeout</code> is used on each element.</p> <p>Tested in Internet Explorer 9, the animation works at realtime speed (it should take 1.6 seconds and it took exactly 1.6 seconds). ANY other browser will lag horribly, with animation times of 4 seconds (Firefox 3 and 4, Chrome, Opera) and something like 20 seconds in IE 8 and below.</p> <p><strong>How can IE9 go so fast while all other browsers are stuck in the mud?</strong></p> <p>I have tried to find ways of merging the elements into one, so as to one have one setTimeout at any given time, but unfortunately it wouldn't stand up to any interference (such as clicking a different link to start a new animation before the current one has finished).</p> <p>EDIT: To elaborate in response to comments, here's the outline of the code:</p> <pre><code>link.onclick = function() { clearTimeout(colourFadeTimeout); colourFadeTimeout = setTimeout("colourFade(0);",25); clearTimeout(arrowScrollTimeout); arrowScrollTimeout = setTimeout("arrowScroll(0);",25); clearTimeout(pageFadeOutTimeout); pageFadeOutTimeout = setTimeout("pageFadeOut(0);",25); clearTimeout(pageFadeInTimeout); pageFadeInTimeout = setTimeout("pageFadeIn(0);",25); } </code></pre> <p>Each of the four functions progress the fade by one frame, then set another timeout with the argument incremented, until the end of the animation.</p> <p>You can see the page at <a href="http://adamhaskell.net/cw/index.html" rel="noreferrer">http://adamhaskell.net/cw/index.html</a> (Username: knockknock; Password: goaway) (it has sound and music, which can be disabled, but be warned!) - my JavaScript is very messy since I haven't really organised it properly, but it is commented a bit so hopefully you can see what the general idea is.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload