脚本互相崩溃

Question

好吧，我的问题很简单：将鼠标悬停在照片上时会发生 3 个动作。底部的计时器现在可以工作了，其他的东西都崩溃了。页面应在 5 秒内打开，照片应先移出显示屏。听起来很容易，不是吗？希望如此。

你们知道我能做什么吗？

谢谢你，问好！

<script>
    var interval;  
    var timer = 5; 

    $('.HoverBalken').on({'mouseover': function () {
        timer = setTimeout(function () {
            $('.HoverBalken').toggleClass('HoverBalken-active');
            $('.N').toggleClass('N-active');
            $('.K').toggleClass('K-active');
        }, );  

        timer = setTimeout(function () {
            window.location = "FoliagePlates.html"
        }, 5000); 
    }, 'mouseover': function () {
        interval = setInterval(function() {
             timer--;
             $('.timer').text(timer);
             if (timer === 0) clearInterval(interval); 
        }, 1000);  
    }, 'mouseout' : function () {
        clearTimeout(timer);
        $('.HoverBalken').removeClass('HoverBalken-active');
        $('.N').removeClass('N-active');
        $('.K').removeClass('K-active');
        clearInterval(interval);
        timer = 5;  
        $('.timer').text(timer);
    } 
});
</script>

Answer 1

<script>
    var interval;  
    var timer = 5; 

    var timeout1,timeout2;

    $('.HoverBalken')

    .mouseover(function() {

        //use different variable than your timer
        timeout1 = setTimeout(function () {
            $('.HoverBalken').toggleClass('HoverBalken-active');
            $('.N').toggleClass('N-active');
            $('.K').toggleClass('K-active');
        }, 2000);  //forgot time here  

        //use different variable than your timer and first timeout
        timeout2 = setTimeout(function () {
            window.location = "FoliagePlates.html"
        }, 5000); 

        //stay in same scope, don't define event again
        interval = setInterval(function() {
             timer--;
             $('.timer').text(timer);
             if (timer === 0) clearInterval(interval); 
        }, 1000);  

    })

    .mouseout(function() {
        //clear both timers
        clearTimeout(timeout1);
        clearTimeout(timeout2);
        $('.HoverBalken').removeClass('HoverBalken-active');
        $('.N').removeClass('N-active');
        $('.K').removeClass('K-active');
        clearInterval(interval);
        timer = 5;  
        $('.timer').text(timer);
    });

</script>

这应该可以修复它，请注意代码中的注释

脚本互相崩溃

Scripts crashing each other

javascript

function

setinterval

mouseover