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

clearInterval 不适用于 jquery .hover

clearInterval not working with jquery .hover

javascript

setinterval

clearinterval