使用 jQuery 在 JavaScript 中设置延迟悬停时循环代码

Question

我希望通过 jQuery 悬停事件来启动和停止具有设定延迟的循环。我一直试图用“鼠标悬停”和“鼠标移出”来做到这一点，但没有成功。

示例（奇怪的伪代码）：

Mouseover
    Loop
        Change text colour
        Wait 100ms
Mouseout
    Stop loop

我确信这非常简单，我只是不太知道如何用 JavaScript 构建它。

提前致谢。

Answer 1

这可能有效：

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

请参阅实际操作： http://www.jsfiddle.net/YjC6y/19/< /a>

Answer 2

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

尝试一个例子：http://jsbin.com/uraxe4

Answer 3

$("#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 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;
}

此处的工作示例：

http://jsbin.com/etogi3/2