使用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 ，即可為您工作。