How to add delay to jquery mouseover? [duplicate]

Question

I have a bunch of images on one page and I am using the following to trigger an event:

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

});

Is there some way to add a delay such that if a user hovers for maybe 1 second, then it does "//do something" or actually triggers the "mouseover" event?

Answer 1

You can use setTimeout

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

Answer 2

You could do that using a setTimeout along with a clearTimeout if the user leaves too soon:

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

Use a timer and clear it when they mouseout incase they leave within 1000ms

var timer;

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