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 setInterval

1 个答案: