使用 setinterval 和 clearinterval 在 mouseleave 开始动画并在 mouseenter 停止

Question

我正在使用 materialize 轮播，它使用 setInterval() 自动更改幻灯片，但我希望此 setInterval 应该在悬停时停止/暂停并在悬停时重新启动。

我试过使用 clearinterval，但效果不佳。

$(document).ready(function(){

    $('.carousel').carousel(); // Start carousel

    /*  I WAS USING THIS BEFORE JUST FOR CHANGING SLIDES AUTOMATICALLY
    setInterval(function(){
        $('.carousel').carousel('next');
    },2500);
    });
    */

    // THIS IS WHAT IHAVE TRIED

    var myVar;

    function start(){
        var myVar = setInterval(next, 2500);
        function next() {
            $('.carousel').carousel('next');
        }
    }

    function stop() {
        clearInterval(myVar);
        myVar = 0;
    }

    $('.carousel').mouseenter(function(){stop();});
    $('.carousel').mouseleave(function(){start();});

    start();
});

代码没有给出任何错误。

Answer 1

替换此行：

var myVar = setInterval(next, 2500);

有了这个：

myVar = setInterval(next, 2500);

您已经定义了全局变量，并且在您的 start 函数中，您再次初始化该变量并将 setInterval 的 return 值分配给它。这意味着除了 start 函数之外的其余代码 myVar 保持未分配状态。所以 clearInterval 不起作用。

您只需将 return 值分配给全局变量 myVar 即可。

使用 setinterval 和 clearinterval 在 mouseleave 开始动画并在 mouseenter 停止

Start animation on mouseleave and stop on mouseenter using setinterval and clearinterval

javascript

jquery

setinterval

materialize

clearinterval