Jak wywołać zdarzenie po 3 sekundach unoszenia się

Question

Mam div i chcę wystrzelić zdarzenie tylko po tym, jak użytkownik ciągnie myszką przez 3 sekundy. Mój kod nie działa dobrze, ponieważ uruchamia się zaraz po najechaniu myszką i nie "czeka".

Kod:

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

Answer 1

trzeba przechowywać limitu czasu id gdzieś i wyczyścić go po odsunięciu myszy. Jest to wygodne w użyciu właściwość danych, aby zapisać 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

Można to osiągnąć przez delay opcji:

Working demo

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

Answer 3

Spróbuj ten kod:

<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

Zamówienie poniższy kod

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

Zakładając masz div z id z myelement, można to zrobić:

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 jest pomocnym pytaniem wyjaśniającym: używanie mouseenter i mouseover tutaj: Jquery mouseenter() vs mouseover(). Rozważ to przy wyborze, którego użyć.