clearInterval does not work in Firefox

Question

Here some magic I think, this works perfectly in Chrome but not in Firefox or Opera

var initList = setInterval(function(){ 
   if( cache.isAnimating ) return false;
    cache.isAnimating = true;
    aux.navigate( 1, $el, $wrapper, settings, cache ); //slide
   }, 3500) ;
$(document).ready(function(){
   initList = setInterval(function(){   
    if( cache.isAnimating ) return false;
    cache.isAnimating = true;
    aux.navigate( 1, $el, $wrapper, settings, cache );  
   }, 3500) ;
   })

on mouseover Firefox does not clearInterval:

$("div.ca-wrapper").mouseover(function(){
   clearInterval(initList);
   }).mouseout(function(){
     initList = setInterval(function(){     
     if( cache.isAnimating ) return false;
      cache.isAnimating = true;
      aux.navigate( 1, $el, $wrapper, settings, cache );    
     }, 3500) ;
})  

any suggestions?

Answer 1

You should not redeclare same variable (initList) twice. Use an unique name for each interval.

Maybe, this is what you are lookig for:

var initList2, initList1 = setInterval(function () {
    if (cache.isAnimating) return false;
    cache.isAnimating = true;
    aux.navigate(1, $el, $wrapper, settings, cache); //slide
}, 3500);
$(document).ready(function () {
    initList2 = setInterval(function () {
        if (cache.isAnimating) return false;
        cache.isAnimating = true;
        aux.navigate(1, $el, $wrapper, settings, cache);
    }, 3500);
})

$("div.ca-wrapper").mouseover(function () {
    clearInterval(initList1);
    clearInterval(initList2);
}).mouseout(function () {
    initList2 = setInterval(function () {
        if (cache.isAnimating) return false;
        cache.isAnimating = true;
        aux.navigate(1, $el, $wrapper, settings, cache);
    }, 3500);
})

But using your original code, as setInterval returns an integer, you could use this too:

don't use that

quoting Boris Zbarsky

There is no guarantee that setInterval returns consecutive integers (and in fact in some cases it does not), so the "subtract one" approach is not all that great...

var initList = setInterval(function () {
    if (cache.isAnimating) return false;
    cache.isAnimating = true;
    aux.navigate(1, $el, $wrapper, settings, cache); //slide
}, 3500);
$(document).ready(function () {
    initList = setInterval(function () {
        if (cache.isAnimating) return false;
        cache.isAnimating = true;
        aux.navigate(1, $el, $wrapper, settings, cache);
    }, 3500);
})

$("div.ca-wrapper").mouseover(function () {
    clearInterval(initList);
    clearInterval(initList - 1); // HERE, we are clearing the previous interval 
}).mouseout(function () {
    initList = setInterval(function () {
        if (cache.isAnimating) return false;
        cache.isAnimating = true;
        aux.navigate(1, $el, $wrapper, settings, cache);
    }, 3500);
})

Answer 2

I think the setInterval call before ready is not required

function doSomething(){
    if( cache.isAnimating ) return false;
    cache.isAnimating = true;
    aux.navigate( 1, $el, $wrapper, settings, cache );  
}

$(document).ready(function(){
    initList = setInterval(doSomething, 3500) ;
});

$("div.ca-wrapper").mouseenter(function(){
    clearInterval(initList);
}).mouseleave(function(){
    initList = setInterval(doSomething, 3500) ;
})  

Answer 3

Have you tried removing the first setInterval? Also, I've DRY-ed up your code a bit.

$(document).ready(function(){
  var initList = null;
  setInit();

  $("div.ca-wrapper").mouseover(function(){
    clearInterval(initList);
  }).mouseout(function(){
    setInit();
  });
})

function setInit() {
  initList = setInterval(function(){   
    if( cache.isAnimating ) return false;
    cache.isAnimating = true;
    aux.navigate( 1, $el, $wrapper, settings, cache );  
  }, 3500);
}