Question

I have a set of pages acting as a slideshow where different elements are timed to be displayed as a recorded voice-over reads the text.

I’m running into trouble when I use load() to refresh the area with the next “slide”. I’m using setTimeout to control the display. My problem is that the 2nd page is using the setTimeout timings found in the first page. Do I need to clearTimeout?

Page 1 script:

var actions = [
  { time : 4, action : function() { $('#slidePhoto').animate({width: $('#slidePhoto img').width() / 1.5}, 2000 ).addClass('side-photo') } },
  { time : 8, action : function() { $('#slideEl2').fadeIn('slow') } },
  { time : 17, action : function() { $('#slideEl3').fadeIn('slow') } },
  { time : 24, action : function() { $('#slide-container').hide('slide', { direction: "left"}, 1000, function () {
      $('#slide-container').load('introduction2.php', function() {
        $('#slide-container').fadeIn('slow');
      });
    } ) } }
];
$(document).ready(function() {
  for( var i in actions ) {
    setTimeout( actions[i].action, actions[i].time * 1000 );
  }
});

Page 2 script:

var actions = [
  { time : 10, action : function() { $('#slidePhoto').animate({width: $('#slidePhoto img').width() / 1.5}, 2000 ).addClass('side-photo') } },
  { time : 16, action : function() { $('#slideEl2').fadeIn('slow') } },
  { time : 29, action : function() { $('#slideEl3').fadeIn('slow') } },
  { time : 40, action : function() { $('#slide-container').hide('slide', { direction: "left"}, 1000, function () {
      $('#slide-container').load('introduction3.php', function() {
        $('#slide-container').fadeIn('slow');
      });
    } ) } }
];
$(document).ready(function() {
  for( var i in actions ) {
    setTimeout( actions[i].action, actions[i].time * 1000 );
  }
});

The pages are loaded within an area on a main container page. I believe I could get around this by using different IDs on every single page, but I’m guessing there’s something much easier.

Answer 1

You need to register the timer id which is used as argument of the clearTimeout function.

For example when creating the timeouts :

for( var i=0; i<actions.length; i++ ) {
    actions[i].timeout = setTimeout( actions[i].action, actions[i].time * 1000 );
}

And then to clear them :

for( var i=0; i<actions.length; i++ ) {
    clearTimeout(actions[i].timeout);
}

(I replaced your “for var i in” by a standard iteration on actions length, it’s the best practice for arrays)