如何为jquery mouseover添加延迟？

Question

我在一个页面上有一堆图像,我使用以下内容来触发事件:

$('.img').on('mouseover', function() {
 //do something

});

有没有办法添加一个延迟,如果用户徘徊可能1秒,那么它会"//做某事"或实际触发"鼠标悬停"事件？

Answer 1

您可以使用 setTimeout

var delay=1000, setTimeoutConst;
$('.img').on('hover', function() {
  setTimeoutConst = setTimeout(function() {
    // do something
  }, delay);
}, function() {
  clearTimeout(setTimeoutConst);
});

Answer 2

如果用户离开太快,您可以使用a setTimeout和a 一起执行此操作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);
});

Answer 3

使用计时器并在鼠标移出时清除它，以防它们在1000ms内离开

var timer;

$('.img').on({
    'mouseover': function () {
        timer = setTimeout(function () {
            // do stuff
        }, 1000);
    },
    'mouseout' : function () {
        clearTimeout(timer);
    }
});