javascript - jQueryで長引くホバーリピートアクションを作成する

Question

$('#test').hover(
 function () {
  $(this).append('Blah');
 }
);

Blahホバーしている時間に#test基づいて、jQueryを繰り返し追加するにはどうすればよい#testですか？

たとえば、Blahホバーしている1秒に1回追加するにはどうすればよい#testですか？

Answer 1

あなたはsetIntervalこのように使うことができます：

var myInterval = false;
$('#test').hover(
   function(){
      $that = $(this); 
      // need to save $(this) as 'this' will be different within setInterval
      myInterval = setInterval(function(){
         $that.append('Blah');
      }, 100); // repeat every 100 ms
   },function() {
      clearInterval(myInterval);  // clear the interval on hoverOut
   }
);

ここでの実例

Answer 2

(function() {
   var intv;
   $('#test').hover(
     function () {
        var $this = $(this);
        intv = setInterval(function() {
          $this.append('Blah');
        }, 1000);
     },
     function() {
       clearInterval(intv);
     }
  );
}());

グローバルスコープを汚染しないように、すべてのコードを匿名スコープの関数で囲み$(this)、タイムアウト内で毎秒新しい評価を回避するために参照をキャッシュしました

Answer 3

あなたはsetIntervalそうするために使うことができます：

var appending; //var to store the interval

$('#test').hover(function(){ //on mouseenter
   var $this = $(this); //store the context, i.e. the element triggering the hover
   appending = setInterval(function(){ //the following function gets executed every second until the interval is cleared
      $this.append('<p>Blah</p>'); //append content to context
   },1000); //1000 meaning the repetition time in ms
},function(){ //on mouseleave
   clearInterval(appending); //clear the interval on mouseleave
});

Answer 4

setInterval（）を使用する

$('#test').hover(
 function () {
setInterval(function() {
  $(this).append('Blah');
},1000)
 }
);