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

on mouseover Firefox不会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) ;
})

有什么建议吗？

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

我认为setInterval之前的ready来电不是必需的

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

clearInterval在Firefox中不起作用

3 个答案: