jQuery setInterval on mouseover

Question

I have a problem that i will not be able to solve by myself. I want to show a countdown timer once they hover over a photo. It works the first time you hover. If you move the mouse and hover again it will just be weird numbers jumping. I hope someone can help me with this!

Best Regards,

Tassilo

 <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>

vanir · Accepted Answer · 2018-02-26T07:46:47.243

0

I think it's because the timer variable is declared locally inside the mouseover(), and you're trying to clear it inside the mouseout(). Try placing it outside the $('.Photo').on({ });

Additionally, place your interval variable outside so you can clear it in your mouseout() function.

<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>

edited Feb 26 '18 at 07:46

answered Feb 26 '18 at 05:59

vanir

349
3
11

thank you very much for your reply. Unfortunately though its not solvng the problem. With the var timer outside the $('.Photo').on({ }); the timer is getting really crazy. – Tassilo Feb 26 '18 at 06:37
try resetting the timer in the `mouseout()`. `timer = 5;` don't move the timer inside the mouseover yet. try this one first – vanir Feb 26 '18 at 06:50
how would i write the reset? im really new to javascript... :/ – Tassilo Feb 26 '18 at 06:56
The Website is not at all finished but to show you directly the site: http://njoki.de/indexPort9.html – Tassilo Feb 26 '18 at 07:02
Worked out!!!!!! Thank you soo much!! Only one thing until it is how it should be: the number that is shown in the first second is the one that was the last number shown before hahaha. confusing. But well it doesnt start with the 5 again but with like a 2 - then 4. Do you know an answer?? – Tassilo Feb 26 '18 at 07:41
if it solved your problem, i'll edit my answer and you can mark it as accepted. you're welcome :) – vanir Feb 26 '18 at 07:44
Yeeah thank you very very much!!! Tried to solve this problem for hours and hours searching. Do you know though how i can fix the wrong first number? – Tassilo Feb 26 '18 at 07:49
i've edited the jsfiddle. i added `$('.timer').text(timer);` under the `timer = 5`. is that how it should be? https://jsfiddle.net/7k79q88w/8/ – vanir Feb 26 '18 at 07:52
Thank you soo much! – Tassilo Feb 26 '18 at 07:55
I will make a new question. maybe you want to help again? :D – Tassilo Feb 26 '18 at 08:13
what is it about this time? :D i won't promise i can answer it though :) – vanir Feb 26 '18 at 08:14
https://stackoverflow.com/questions/48984075/scripts-crash-each-other-what-can-i-do – Tassilo Feb 26 '18 at 08:18

jQuery setInterval on mouseover

1 Answers1