jQuery 鼠标悬停时设置间隔

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>

jQuery 鼠标悬停时设置间隔

jQuery setInterval on mouseover

function

hover

setinterval

mouseover

mouseout