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.

I copied and tried the example code from JSFiddle and it looks ok to me. 18:39:29.388 test.html:7 hover 18:39:30.120 test.html:7 hover 18:39:30.986 test.html:7 hover 18:39:31.803 test.html:7 hover 18:39:34.812 test.html:10 yeh 18:39:42.482 test.html:7 hover 18:39:42.766 test.html:7 hover 18:39:43.330 test.html:7 hover 18:39:43.680 test.html:7 hover 18:39:46.694 test.html:10 yeh — Szellem, May 06 '18 at 16:43
So does your code work except that you only want the event to occur once? — jayt, May 06 '18 at 17:15
Yeah, sorry. My thoughts were too complicated but that's all. — web-stars, May 06 '18 at 17:16

jayt · Accepted Answer · 2018-05-06T17:48:23.807

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.

edited May 06 '18 at 17:48

answered May 06 '18 at 17:23

jayt

758
1
14
32

Can you maybe help me via this fiddle? https://jsfiddle.net/skh332v9/6/ – web-stars May 06 '18 at 17:29
not sure. But I think it worked. I gave up on my script because it was too big a mess.Though, I am making a new one. I will let you know if I have a problem, okey? – web-stars May 09 '18 at 09:56
1

@web-stars Sure, I would suggest putting console.log() statements throughout your Javascript code, then in your Chrome developer tools, go to 'Console' so that when you run the script, you will be able to see the outputs of those statements. You'll then be able to see which code runs and what breaks by seeing which statements are printed. https://stackoverflow.com/questions/4539253/what-is-console-log – jayt May 10 '18 at 08:30

Kearl · Answer 2 · 2018-05-06T17:44:54.157

1

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();
}

edited May 06 '18 at 17:44

answered May 06 '18 at 17:37

Kearl

86
5

I wasn't sure how I could bring data with the mouseover to the function: `onmouseover="mouseHover(data)"` `function mouseHover(data) {}` – web-stars May 09 '18 at 10:02

javascript onemouseover activated timer should only countdown once

2 Answers2