脚本互相崩溃

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>

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