Javascript "while hovered" loop

Question

Can anybody help me on this one...I have a button which when is hovered, triggers an action. But I'd like it to repeat it for as long as the button is hovered.

I'd appreciate any solution, be it in jquery or pure javascript - here is how my code looks at this moment (in jquery):

var scrollingposition = 0;

$('#button').hover(function(){
++scrollingposition;
    $('#object').css("right", scrollingposition);
    });

Now how can i put this into some kind of while loop, so that #object is moving px by px for as #button is hovered, not just when the mouse enters it?

Answer 1

OK... another stab at the answer:

$('myselector').each(function () {
  var hovered = false;
  var loop = window.setInterval(function () {
    if (hovered) {
      // ...
    }
  }, 250);

  $(this).hover(
    function () {
      hovered = true;
    },
    function () {
      hovered = false;
    }
  );
});

The 250 means the task repeats every quarter of a second. You can decrease this number to make it faster or increase it to make it slower.

Answer 2

Nathan's answer is a good start, but you should also use window.clearInterval when the mouse leaves the element (mouseleave event) to cancel the repeated action which was set up using setInterval(), because this way the "loop" is running only when the mouse pointer enters the element (mouseover event).

Here is a sample code:

  function doSomethingRepeatedly(){
    // do this repeatedly when hovering the element
  }

  var intervalId;

  $(document).ready(function () {

    $('#myelement').hover(function () {
      var intervalDelay = 10;
      // call doSomethingRepeatedly() function repeatedly with 10ms delay between the function calls
      intervalId = setInterval(doSomethingRepeatedly, intervalDelay);
    }, function () {
      // cancel calling doSomethingRepeatedly() function repeatedly
      clearInterval(intervalId);
    });

  });

I created a sample code on jsFiddle which demonstrates how to scroll the background-image of an element left-to-right and then backwards on hover with the code shown above:

http://jsfiddle.net/Sk8erPeter/HLT3J/15/