Looping code when hovering with set delay in JavaScript with jQuery

Question

Hi there, I'm looking to start and stop a loop with a set delay with a jQuery hover event. I've been trying to do it with "mouseover" and "mouseout" with no luck.

Example (odd psudocode):

Mouseover
    Loop
        Change text colour
        Wait 100ms
Mouseout
    Stop loop

I'm sure this is super easy, I just don't quite know how to structure it with JavaScript.

Thanks in advance.

Answer 1

This might work:

$(function(){
    $('#test').hover(function(){
      var self = $(this),
         rnd  = null,
         col  = null;

      this.iid = setInterval(function(){          
        col = ['#'];
        rnd = ~~(Math.random()*255);
          col.push(rnd.toString(16).length < 2 ? '0' + rnd.toString(16) : rnd.toString(16));     
          col.push(rnd.toString(16).length < 2 ? '0' + rnd.toString(16) : rnd.toString(16));
          col.push(rnd.toString(16).length < 2 ? '0' + rnd.toString(16) : rnd.toString(16));

        self.css({backgroundColor: col.join('')});
      }, 100);
   }, function(){
       if(this.iid){
           clearInterval(this.iid);
           delete this.iid;
       }
  });
});​

See this in action: http://www.jsfiddle.net/YjC6y/19/

Answer 2

$("#yourElem").hover(
  function () {  /* mousenter */
    $this = $(this);

    // take note that the mouse is currently hovering
    $this.data("isHovering", true);

    // create an interval and store its ID in jQuery data
    $this.data("loopId", setInterval(function () {
      // only do something if we are still hovering
      if ($this.data("isHovering")) {
        $this.css("color", getRandomColorValue());
      }
    }, 100);
  },
  function () {  /* mouseleave */
    $this = $(this);

    // take note that the mouse is no longer hovering
    $this.data("isHovering", false);

    // clear the interval that was set and delete the ID
    if ($this.data("loopId")) {
      clearInterval($this.data("loopId"));
      $this.data("loopId", false);
    }
  }
)

Answer 3

function rgb() {
    var color = 'rgb(';
    for (var i = 0; i < 3; i++) {
        color += Math.floor(Math.random() * 255) + ',';
    }
    return color.replace(/\,$/, ')')
}

var loop = null;
$(function () {
    $('#someid').hover(function () {
        var $this = $(this);
        loop = setInterval(function () {
            $this.css({backgroundColor: rgb() });
        }, 100);
    }, function () {
        clearInterval(loop);
    });
});

try an example : http://jsbin.com/uraxe4

Answer 4

changeColorTimerId = -1;


$('.box').hover(function(){
  //mouseOver code here
   changeColorTimerId = setInterval ( changeColor, 1000 );  
},function(){
  //mouseOut  code here  
  if ( changeColorTimerId ){
      clearInterval ( changeColorTimerId  )
  }

});

function changeColor(){
  $(".box").css ( 'backgroundColor',  '' + getRandomColor() );
}

function getRandomColor(){  
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

working example here:

http://jsbin.com/etogi3/2