У меня есть куча изображений на одной странице, и для запуска события я использую следующее:
$('.img').on('mouseover', function() {
//do something
});
Есть ли способ добавить задержку таким образом, что если пользователь будет парировать в течение 1 секунды, тогда он "делает что-то" или фактически запускает событие "mouseover"?
Вы можете использовать setTimeout
var delay=1000, setTimeoutConst;
$('.img').on('hover', function() {
setTimeoutConst = setTimeout(function(){
//do something
}, delay);
}, function(){
clearTimeout(setTimeoutConst );
});
Вы можете сделать это с помощью setTimeout вместе с clearTimeout, если пользователь уйдет слишком рано:
var timer;
var delay = 1000;
$('#element').hover(function() {
// on mouse in, start a timeout
timer = setTimeout(function() {
// do your stuff here
}, delay);
}, function() {
// on mouse out, cancel the timer
clearTimeout(timer);
});
Я тоже искал что-то подобное, но с вторичной задержкой. Я взял один из ответов здесь и расширил его
В этом примере показан div после X секунд mouseover и скрывается после X секунд мыши. Но отключается, если вы наводите курсор на показанный div.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
.foo{
position:absolute; display:none; padding:30px;
border:1px solid black; background-color:white;
}
</style>
<h3 class="hello">
<a href="#">Hello, hover over me
<span class="foo">foo text</span>
</a>
</h3>
<script type="text/javascript">
var delay = 1500, setTimeoutConst,
delay2 = 500, setTimeoutConst2;
$(".hello").mouseover(function(){
setTimeoutConst = setTimeout(function(){
$('.foo').show();
},delay);
}).mouseout(function(){
clearTimeout(setTimeoutConst );
setTimeoutConst2 = setTimeout(function(){
var isHover = $('.hello').is(":hover");
if(isHover !== true){
$('.foo').hide();
}
},delay2);
});
</script>
Используйте таймер и очищайте его, когда они выходят за пределы, которые они оставляют в течение 1000 мс
var timer;
$('.img').on({
'mouseover': function () {
timer = setTimeout(function () {
// do stuff
}, 1000);
},
'mouseout' : function () {
clearTimeout(timer);
}
});
Вы можете использовать jquery.Delay, как это (не тестировалось):
$("#test").hover(
function() {
$(this).delay(800).fadeIn();
}
);