jQueryタイマー機能

Question

私はマウスがオブジェクトの中にn秒以上を費やした場合にのみトリガーしたいonmouseenterイベントを持っています。

$('#object').live('mouseenter', function() { 

// code that will execute only if mouse spends more than n seconds 

}); 

私は何か助けていただきありがとうございます。 「作業」テキストを変更し、赤に色を変更する例えば

ので

Answer 1

あなたは、遅延の後に呼び出される関数を設定することができますmouseleaveと表示された場合はキャンセルしてください：

(function() { 
    var timer = 0; // 0 is a safe "no timer" value 

    $('#object').live('mouseenter', function() { 
     // I'm assuming you don't want to stomp on an existing timer 
     if (!timer) { 
      timer = setTimeout(doSomething, 1000); // Or whatever value you want 
     } 
    }).live('mouseleave', function() { 
     // Cancel the timer if it hasn't already fired 
     if (timer) { 
      clearTimeout(timer); 
      timer = 0; 
     } 
    }) 

    function doSomething() { 
     // Clear this as flag there's no timer outstanding 
     timer = 0; 

     // Do your stuff 
    } 

})(); 

Answer 2

var timeout; 
$('#object').live('mouseenter', function() { 
    timeout = setTimeout(function(){ 
     // code that will execute only if mouse spends more than n seconds 
    }, 2000); 

}); 

$('#object').live('mouseleave', function() { 
    clearTimeout(timeout); 
}); 

、コードを以下のことは結構です

<div id="object">Hover here and wait</div> 
<script> 
var timeout; 
var object = $("#object"); 
object.live('mouseenter', function() { 
    timeout = setTimeout(function(){ 

     object.css({'color': 'red', 'font-size': '400%'}); 
     object.html('Working'); 
    }, 2000); 
}); 

object.live('mouseleave', function() { 
    clearTimeout(timeout); 
}); 
</script> 

demo