如何在懸停3秒后開火

Question

我有一個div，我想在用戶連續徘徊他的鼠標3秒后才開始一個事件。 我的代碼不能很好地工作，因為它在懸停后立即觸發並且不會“等待”。

碼：

$(".inner_pic").mouseenter(function () {
    setTimeout(function () {
        alert('testing');
    }, 3000);
}).mouseleave(function () {
    alert('finish');
});  

Answer 1

您需要在某處存儲超時ID並在mouseout上清除它。 使用data屬性來保存此id很方便：

 $(".inner_pic").mouseenter(function () { $(this).data('timeout', setTimeout(function () { alert('testing'); }, 3000)); }).mouseleave(function () { clearTimeout($(this).data('timeout')); alert('finish'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="inner_pic">PICTURE</div> 

Answer 2

您可以通過delay選項實現此目的：

工作演示

$('#elem').popover({
    trigger: "hover",
    delay: {show : 3000, hide : 0} });

Answer 3

查看以下代碼

 var myVar; $( "div#container" ) .mouseover(function() { myVar = setTimeout(function(){ alert("Hello"); }, 3000); }) .mouseout(function() { clearTimeout(myVar); }); 

 div { background: red; margin: 20px; height: 100px; width: 100px; display:block; cursor: pointer; } div:hover { background: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"></div> 

Answer 4

試試此代碼：

<div id='a' style="border:2px solid black" >
    <h3>Hove On me</h3>
    For 2000 milliseconds. You will get an alert.
    </br>
    </div>

$(document).ready(function(){
   var delay=2000, setTimeoutConst;
   $('#a').hover(function(){
        setTimeoutConst = setTimeout(function(){
            /* Do Some Stuff*/
           alert('Thank You!');
        }, delay);
   },function(){
        clearTimeout(setTimeoutConst );
   })
})

</script>

DEMO：

http://jsfiddle.net/uhwzzu1u/1/

Answer 5

 var st; $(".inner_pic").mouseenter(function(e) { var that = this; st = setTimeout(function() { alert('testing'); }, 3000); }).mouseleave(function() { clearTimeout( st ); alert('finish'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="inner_pic"> <h3>Picture Here - Hover me</h3> </div> 

Answer 6

假設你有一個id為myelement的div ，你可以這樣做：

var divMouseOver;
$('#myelement').mouseover(function() {
  divMouseOver = setTimeout(function() {
     alert("3 seconds!"); //change this to your action
  }, 3000);
});
$('#myelement').mouseout(function() {
  if (divMouseOver) {
    clearTimeout(divMouseOver);
  }
});

BTW，tere是一個有用的澄清問題：在這里使用mouseenter和mouseover ： Jquery mouseenter（）vs mouseover（） 。 在選擇使用哪個時考慮這一點。