Как запустить событие после 3 секунд зависания

Question

У меня есть div, и я хочу запустить событие только после того, как пользователь непрерывно наводит курсор мыши на 3 секунды. Мой код не работает, потому что он срабатывает сразу после наведения и не «ждет».

Код:

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

Answer 1

Вы должны хранить таймаут идентификатора где-то и снимите его отведение указателя мыши. Это удобно использовать свойство данных, чтобы сохранить этот идентификатор:

$(".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 опции:

Working demo

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

Answer 3

Попробуйте этот код:

<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

Checkout код ниже

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

Предполагая, что вы есть div с id из myelement, вы можете сделать это:

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 - полезный уточняющий вопрос re: используя mouseenter и mouseover прямо здесь: Jquery mouseenter() vs mouseover(). Подумайте об этом, выбирая, что использовать.