Question

I have a timer setup like so:

var timerID;

$this.hover(function(){
   $this.find('.stage_obj').each(function(index){
      var current_obj = $(this);
      timerID = setTimeout(function(){
         animate_on_top(current_obj, index);}, parseInt(OS.delay_y_on_set[index],10));
      });   
}, function(){
   clearTimeout(timerID);
});

There are functions to control the animation in/out on hover. The timers are acting as delays (.delay won’t work in my situation). Everything works fine, except the timer isn’t cancelled on mouse exit, and still fires. Here’s the actual animation_on function being called:

function animate_on_top(current_obj, index){ 
   current_obj.animate(
      {'top':OS.ends_y_set[index]},
      {duration:500, queue:false,
      specialEasing:{'top':'linear'}
});

Anyone have any ideas why the setTimeout isn’t cancelling the timer? Thanks!

Answer 1

The reason why the timeout isn’t cleared is because you set multiple timeouts via the each but only store (and hence clear) one of them. You need to store and clear each of the time out ids you create.

var timerID = [];

$this.hover(function(){
   $this.find('.stage_obj').each(function(index){
      var current_obj = $(this);
      var currentTimerID = setTimeout(function(){
         animate_on_top(current_obj, index);}, parseInt(OS.delay_y_on_set[index],10));
      timerID.push(currentTimerID);
      });   
 }, function(){
   for (var i = 0; i < timerID.length; i++) {
     clearTimeout(timerID[i]);
   }
});