Question

我使用timeout和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

1 个答案: