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

Question

我正在使用实体化转盘，并且正在使用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的返回值。 这意味着myVar对于start功能以外的其余代码仍未分配。 因此clearInterval不起作用。

您只需要将返回值分配给全局变量myVar ，即可为您工作。