clearInterval不使用jQuery .hover

Question

我使用超时和setInterval与下面的代码翻转效果：

// Flip and unflip panels 
function startFlip() { 
    $('div#front-page-mosaic .front-box.flip').find('div').stop().rotate3Di('flip', 500, {direction: 'clockwise', sideChange: mySideChange}); 
    setTimeout(function() { 
     $('div#front-page-mosaic .front-box.flip').find('div').stop().rotate3Di('unflip', 500, {sideChange: mySideChange}); 
    }, 8500); 
} 

// Global flipping effect hook 
var flip_hook; 

// Autostart flipping effect 
setTimeout(function() { 
    startFlip(); 
    flip_hook = setInterval(function(){ startFlip(); }, 17000); 
}, 8000); 

    // Stop the flipping effect 
function stopFlip() { 
    clearInterval(flip_hook); 
} 

// Stop fliping on mouse hover, restart on mouse leave 
$('div#front-page-mosaic .front-box.flip').hover(
    function() { 
     stopFlip(); 
    }, 
    function() { 
     setTimeout(function() { 
      startFlip(); 
      flip_hook = setInterval(function(){ startFlip(); }, 17000); 
     }, 8000); 
    } 
); 

但它不会停止在鼠标悬停的影响。似乎它没有捕获clearInterval（）。任何想法为什么？

Answer 1

您正在调用setTimeout以在8秒后触发。因此，如果用户在最后一次setTimeout触发之前输入，则仍会运行。您还需要取消该计时器。

var delay; 
function stopFlip() { 
    clearInterval(flip_hook); 
    clearTimeout(delay); 
} 

// Stop fliping on mouse hover, restart on mouse leave 
$('div#front-page-mosaic .front-box.flip').hover(
    function() { 
     stopFlip(); 
    }, 
    function() { 
     delay = setTimeout(function() { 
      startFlip(); 
      flip_hook = setInterval(function(){ startFlip(); }, 17000); 
     }, 8000); 
    } 
);