Garbage Burrito!

An internet web blog by Ben Kittrell

Slideshow / Clearing All Javascript Timers

Slideshow / Clearing All Javascript Timers
Ben Kittrell - 05/31/2007 19:07:00
Comments: 10

I decided to whip up a slideshow for the photo albums, since a few people have asked for it.  First I thought about finding a flash one, but I knew that it would probably ask for a simple directory of images, and doodlekit doesn't store images that way.  So I figured I could just use Ajax and some Scriptaculous effects instead.  The end result is pretty slick

One thing I had to do to make it look so good is preload the next image, so you can't see it loading when the last one is fading.  To do this I have a temporary div that sits over the main image div.  I copy image A into the temp div, load image B in the main div, then fade the temp div.  This requires me to use four different timers for various purposes to make everything look smooth.
 
However, I ran into a problem when I added the previous and next links.  When you clicked on either, it loaded the proper image fine but the timers where still running.  This started a chain reaction of all kinds of crap.  

I needed a way to stop the timers, but I was using Rail's Javascript helpers which meant I couldn't just get the timer's id and call clearTimeout.

Instead I came up with a cool way to clear all the timers in one swoop.  Basically I override the setTimeout method and store each timer id in an array.  Then when I need to I just loop through the array and clear them all.

    timers = new Array();
    oldSetTimeout = window.setTimeout;
    window.setTimeout = function(code, interval) {
      timers.push(oldSetTimeout(code, interval));
    }
    
    function resetTimeouts() {
      timers = new Array();
    }
    
    function clearTimeouts() {
      for (var i= 0;i < timers.length; i++) {
        clearTimeout(timers[i]);
      }
      resetTimeouts();
    }


I know this isn't totally elegant, but I think it's a good solution to a sticky problem.  To use, just include this code and call clearTimeouts whenever you want.  I extracted resetTimeouts so it could be called after each slide transition, and so the timer array didn't just keep growing.

Comments: 10

Comments

1. Stephen Ausman   |   06/05/2007 03:58:10

Slideshow feature is awesome :)

Can't wait to see what you make next.

2. rheaghen   |   06/11/2007 15:08:46

pretty slick ben. =)

3. rheaghen   |   07/02/2007 22:45:14

Hey, it would also be pretty cool if the next, previous links also used the fade effect.

4. Ben Kittrell   |   07/03/2007 00:27:43

Yeah, I wanted to, but the timing is already pretty complicated and volatile. I might try that later.

5. Jon  |  my website   |   04/04/2010 02:16:12

Awesome little function, nice work!

6. MAC makeup wholesale  |  my website   |   10/07/2010 17:13:09

Have a nice day for you!

7. yiwu  |  my website   |   10/11/2010 05:20:52

Awesome little function, nice work!

8. swarovski jewellery sale  |  my website   |   10/21/2010 06:41:54

we like<a href="http://www.swarovski-crystal-jewelry.net"><strong>swarovski jewellery< /strong></a>
and I always buy <a href="http://www.swarovski-crystal-jewelry.net"><strong>swarovski jewelry< /strong></a>
they have good quality <a href="http://www.swarovski-crystal-jewelry.net/swarovski-necklace-c-5.html"><strong>swarovski necklace/strong></a>

9. st laurent florist  |  my website   |   12/08/2010 17:05:56

It's good javascript. I really appreciate the kind of topics you post here. Thanks for sharing us a great information that is actually helpful. Good day!

10. Foakleys  |  my website   |   02/12/2012 15:50:31

Those who know better than the good of those who, not the music, Good question, is good. And if they do not want to, just casually ask, that is able to get the correct answer,

Post a Comment


Please enter the word below.


powered by Doodlekit™ Free Website Builder by Doodlebit™ Website Company