Keep calling on a function while mouseover

Question

how do I keep calling a function on mouseover while the mouse is hovered over an html element

Example:

<script>
    function a() {
        "special code hear"
    }
</script>
<div onmouseover( 'a()')>&nbsp;</div>

How can I keep calling the function a while the mouse is hovered over the div instead of having it call the function once.

Answer 1

Events don't repeat automatically. You can use a timer to repeat the command while the mouse is over, but don't forget to stop the timer at the onmouseout event. You'll need a variable outside of the functions to track the timer so it can be cancelled, which is why we have var repeater declared separately.

<script>
  var repeater;

  function a() ...
</script>

<div onmouseover="repeater=setInterval(a(), 100);" onmouseout="clearInterval(repeater);"></div>

Answer 2

Here is one possible solution using setTimeout (DEMO HERE), it will be repeated every second:

HTML CODE:

<div id='div'>test</div>

JS code :

<script>
 document.getElementById('div').onmouseover=function(){a();};

 function a(){

   //some code here

   setTimeout(a,1000);

  }
</script>

Answer 3

TRY THIS FIDDLE

http://jsfiddle.net/C4AVg/

var pee = '';
$('#poop').mouseover(function(){

              pee =  setInterval(function() {
      // Do something every 5 seconds
                   alert('hi');
}, 1000);
});
    $('#poop').mouseout(function() {
        clearInterval(pee);
});

Answer 4

As others already mentioned calling a function repeatedly can be achieved using setInterval and stopping it can be done using clearInterval.

In case you're looking for a general solution you could use something like this:

function repeatWhileMouseOver(element, action, milliseconds) {
    var interval = null;
    element.addEventListener('mouseover', function () {
        interval = setInterval(action, milliseconds);
    });

    element.addEventListener('mouseout', function () {
        clearInterval(interval);
    });
}

This starts the interval when the mouse is over the element and will call the action function every milliseconds. When the mouse leaves the element the repeated action will be stopped (until you hover the element again).

Just to show a simple application that counts the accumulated (complete) seconds you hovered an element:

function repeatWhileMouseOver(element, action, time) {
    var interval = null;
    element.addEventListener('mouseover', function() {
        interval = setInterval(action, time);
    });

    element.addEventListener('mouseout', function() {
        clearInterval(interval);
    });
}

var counter = 1;
function count() {
    console.log(counter++);
}
repeatWhileMouseOver(document.getElementById('over'), count, 1000);

#over {
  border: 1px solid black;
}

<span id="over">Hover me (at least one second)!</span>

When you run the snippet note that it stops counting when you leave the element, but it resumes counting when you hover it again.

Maybe important to note that mouseout could also be replaced with mouseleave and similarly for mouseover and mouseenter. They will behave different if the element you attach the handler to has child elements.

---

Just a note about compatibility:

• addEventListener is not supported in Internet Explorer 8 and before (see this Q+A for workarounds).
• The mouseenter and/or mouseleave event are not supported (or supported correctly) in several old browsers. Check the notes about compatibility in case you have to support these (see for example this Q+A).