Cách kích hoạt sự kiện sau 3 giây di chuột

Question

Tôi có một div và tôi muốn kích hoạt sự kiện chỉ sau khi người dùng liên tục di chuột của mình trong 3 giây. Mã của tôi không hoạt động tốt vì nó kích hoạt ngay sau khi di chuột và không "chờ".

Code:

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

Answer 1

Bạn cần lưu trữ id timeout đâu đó và xóa nó khi di chuột ra. Đó là thuận tiện để sử dụng tài sản dữ liệu để lưu id này:

$(".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

Bạn có thể đạt được điều này bằng cách delay tùy chọn:

Working demo

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

Answer 3

Cố Bộ luật này:

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

Thanh toán mã dưới đây

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

Giả sử bạn có một div với id của myelement, bạn có thể làm điều này:

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, đây là câu hỏi làm rõ hữu ích: sử dụng mouseenter và mouseover ngay tại đây: Jquery mouseenter() vs mouseover(). Hãy cân nhắc điều này khi chọn sử dụng.