鼠标悬停时的jQuery setInterval

Question

我有一个我自己无法解决的问题。一旦他们将鼠标悬停在照片上，我想显示一个倒数计时器。它在您第一次悬停时起作用。如果您移动鼠标并再次悬停，那只会是奇怪的数字跳跃。 我希望有人可以帮助我！

最好的问候，

塔西洛

 <script>

$('.Photo').on({

    'mouseover': function () {

var timer = 5;  

var interval = setInterval(function() {
    timer--;
    $('.timer').text(timer);
    if (timer === 0) clearInterval(interval);
}, 1000);  

    },      
'mouseout' : function () {
        clearTimeout(timer);   
    }       
});
</script>

Answer 1

我认为这是因为timer 变量是在mouseover() 中本地声明的，而您正试图在mouseout() 中清除它。试着把它放在$('.Photo').on({ });之外

此外，将您的 interval 变量放在外面，以便您可以在 mouseout() 函数中清除它。

<script>

    var interval;
    var timer = 5;

    $('.photo').on({

        'mouseover': function () {

            interval = setInterval(function() {
                timer--;
                $('.timer').text(timer);
                if (timer === 0) clearInterval(interval);

            }, 1000);  

        },

       'mouseout' : function () {
           clearInterval(interval);
           timer = 5;
        }       
    });
</script>