javascript onemouseover activated timer should only countdown once

Question

My timer is activated by a onmouseover function.

My css animation finished after 15 seconds, but my timer didn't. The times is re-activated after each onmouseover instead of a on time count down.

<span onmouseover="mouseHover()">Hover this text</span>

This activates this function:

function mouseHover() {
    startTimer();
}

var timer;

function startTimer() {
    window.clearTimeout(timer);
    timer = window.setTimeout(function(){
        getElementById("demo").innerHTML="Hovered!";
    },3000); 
}

Note: The timer is working (except for in the fiddle)

If you have any constructive feedback, please tell me! Thanks

Jsfiddle The JSfiddle isn't working for me, I don't know why.

Answer 1

If I've understood right, you may want to do something like the following.

After 'var timer' you should write a variable like 'var executed = False'. Then, at the end of your startTimer() function, write 'let executed = True' - so that once the function is ran the first time, the variable executed will now be set to True. You'll then want to determine if the code has previously been executed before running the function, so in function mouseHover(), write...

if (executed == False){
    startTimer()
};

so the function only runs if it hasn't before!

Edit: Put the mouseHover() function after your 'executed' variable but before the startTimer() function.

Edit 2: I should not have used 'let executed = ...', just 'executed = ...' Let me know if this works.

Answer 2

Edit: I misunderstood your question. You need it to execute only once. Add a new variable to mark the event if it has started or not.

var timer, started = false;

var startTimer = function() {

    if(started) return;
    started = true;

    window.clearTimeout(timer);
    ...

}

window.mouseHover = function() {
    startTimer();
}