Easiest way to repeatedly call a custom function in Jquery while hovering?

Question

I have a function called goRight() which does some stuff when I click a div called "goright".

I want to make it so that when I hover over the div "goright" it will call the function repeatedly (with a small delay) for as long as I'm hovering, and then do nothing and stop once i move the mouse away.

I have experimented with setInterval but I think I'm misunderstanding how it works so it isn't functioning.

Thanks.

Answer 1

Not using jQuery but this works for me, and the approach should be similar

<script type="text/javascript" charset="utf-8">
  var doingStuff = false;
  function doStuff() {
    if (doingStuff) {
      document.getElementById('stuff').innerHTML += '.';
      setTimeout(doStuff, 100);
    }
  }
</script>

<p onmouseover="doingStuff = true; doStuff()" onmouseout="doingStuff = false">
  Mouseover to do stuff
</p>

<p id="stuff">Stuff: </p>

This will add a . to the document every 100ms as long as you are hovering.

Basically, set a boolean value to true on mouseover, and false and mouse out. And dont schedule the next call unless the variable is true. Also, you aren't calling a function every 100ms unless you need to. Meaning nothing is happening until you hover, set the var to true and kick off the repeating function.