3秒后如何射击

I have a div and I want to fire an event only after user continuous hovers his mouse for 3 sec. My code doesn't work well because it fires right after hover and doesn't "wait".

我有一个div，我想要在用户连续移动鼠标3秒后触发一个事件。我的代码不能很好地工作，因为它在鼠标悬停之后立即触发，而不是“等待”。

Code:

代码:

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

6 个解决方案

#1

You need to store timeout id somewhere and clear it on mouseout. It's convenient to use data property to save this id:

您需要在某个地方存储timeout id并在mouseout上清除它。使用data property保存这个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>

#2

You can achieve this by delay option:

您可以通过延迟选项实现这一点:

Working demo

演示工作

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

#3

Checkout the below code

检查下面的代码

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>

#4

Try This Code:

试试这段代码:

<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/

#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>

#6

Assuming you have a div with id of myelement, you can do this:

假设您有一个具有myelement id的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's a helpful clarifying question re: using mouseenter and mouseover right here: Jquery mouseenter() vs mouseover(). Consider this when choosing which to use.

顺便说一句，tere提出了一个很有帮助的澄清问题re:在这里使用mouseenter和mouseover: Jquery mouseenter() vs mouseover()。在选择使用哪一种时考虑到这一点。

#1