clearInterval在Firefox中不起作用

Question

我认为这里有些神奇之处，它在Chrome中非常有效，但在Firefox或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) ;
   })

在鼠标悬停时，Firefox无法清除间隔：

$("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) ;
})  

有什么建议么？

Answer 1

您不应两次重复声明相同的变量（initList）。 为每个间隔使用唯一的名称。

也许，这就是您要寻找的东西：

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);
})

但是使用原始代码，因为setInterval返回一个整数，所以您也可以使用以下代码：

不要用那个

引用鲍里斯·扎巴尔斯基（Boris Zbarsky）

无法保证setInterval返回连续的整数（实际上在某些情况下不会返回），因此“减一”方法并不是那么好...

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

我认为不需要在ready之前进行setInterval调用

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

您是否尝试过删除第一个setInterval？ 另外，我对您的代码进行了一些干燥处理。

$(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);
}