[javascript] Good (better) substition for setInterval or setTimeout

Question

I've got a masterpage with some nice UI (jQuery) features. One of these options is interefering with my embedded YouTube (or other alike-) objects. On each, in this case, setInterval event the embedded video stops displaying new frames (for like a second).

More detail: I've got a "polaroid" gallery (in the header) with only 5 100x100 images in it (test: preloading has no effect on performance) and my gallery will show or hide them (fade-in / fade-out) after a period of time. (test: non-animated display:hide or display:block has no effect on performance).

After some testing and I've come to the conclusion that it isn't the "animated" showing or hiding of the pictures, but it's the interval itself (- since altering to display:hide or block had the same result). Perhaps it is my "gallery" "function" on itself ...

 function poladroid() {
     if (!galleryHasFocus) {
         if (galleryMax >= 0) {
             galleryCurrent++;

             if (galleryCurrent > galleryMax) {
                 galleryCurrent = 0;
                 showPictures = !showPictures;
             }
             if (showPictures) {
                 $('#pic-' + galleryCurrent.toString()).show("slow");
             }
             else {
                 $('#pic-' + galleryCurrent.toString()).hide("slow");
             }
         }
     }
     if (!intervalSet) {
         window.setInterval("poladroid()", 3000);
         intervalSet = true;
     }
 }

It's not like my function is doing really awkward stuff is it? So, I was thinking I needed a more "loose" interval function.. but is there an option for it?

Ow.. almost forgot to mention it: FireFox and Chrome perform pretty good; using IE (what else) has the most performance problems.

Answer 1

There is no substitute for setInterval/setTimeout - these are the only ways of timing events in browser based ECMAScript.

Its not easy to grasp the real issue here, but I'm guessing the whatever you are triggering using setInterval is heavier than it has to be (as it is jQuery) - you should try to make this more efficient.

If you want an easy to use slideshow, take a look at http://github.com/oyvindkinsey/JsSlideshow - it has a demo here

By the way, do not use a literal as the first argument to setTimeout/setInterval, use a function reference

setInterval(poladroid, 3000);