A Function To Check If The Mouse Is Still Hovering An Element Every 10 Milliseconds (and Run A Function If It Is)

I was wondering if there is a function to be run after an element (e.g. div class='myiv') is hovered and check every X milliseconds if it's still hovered, and if it is, run another

Solution 1:

For most purposes in simple interfaces, you may use jquery's hover function and simply store in a boolean somewhere if the mouse is hover. And then you may use a simple setInterval loop to check every ms this state. You yet could see in the first comment this answer in the linked duplicate (edit : and now in the other answers here).

But there are cases, especially when you have objects moving "between" the mouse and your object when hover generate false alarms.

For those cases, I made this function that checks if an event is really hover an element when jquery calls my handler :

var bubbling = {};
bubbling.eventIsOver = function(event, o) {
if ((!o) || o==null) returnfalse;
var pos = o.offset();
var ex = event.pageX;
var ey = event.pageY;
if (
    ex>=pos.left
    && ex<=pos.left+o.width()
    && ey>=pos.top
    && ey<=pos.top+o.height()
) {
    returntrue;
}
returnfalse;
};

I use this function to check that the mouse really leaved when I received the mouseout event :

 $('body').delegate(' myselector ', 'mouseenter', function(event) {
    bubbling.bubbleTarget = $(this);

    // store somewhere that the mouse is in the object

}).live('mouseout', function(event) {
    if (bubbling.eventIsOver(event, bubbling.bubbleTarget)) return;

    // store somewhere that the mouse leaved the object

});

Solution 2:

You can use variablename = setInterval(...) to initiate a function repeatedly on mouseover, and clearInterval(variablename) to stop it on mouseout.

http://jsfiddle.net/XE8sK/

var marker;
$('#test').on('mouseover', function() {
    marker = setInterval(function() {
        $('#siren').show().fadeOut('slow');
    }, 500);
}).on('mouseout', function() {
    clearInterval(marker);
});​

Solution 3:

jQuery has the hover() method which gives you this functionality out of the box:

$('.myiv').hover(
    function () {
        // the element is hovered over... do stuff

    }, 
    function () {
        // the element is no longer hovered... do stuff
    }
);

To check every x milliseconds if the element is still hovered and respond adjust to the following:

var x = 10; // number of millisecondsvar intervalId;
$('.myiv').hover(
    function () {
        // the element is hovered over... do stuff
        intervalId = window.setInterval(someFunction, x);
    }, 
    function () {
        // the element is no longer hovered... do stuffwindow.clearInterval(intervalId);
    }
);

DEMO - http://jsfiddle.net/z8yaB/

Solution 4:

var interval = 0;
$('.myiv').hover(
    function () {
        interval = setInterval(function(){
           console.log('still hovering');
        },1000);
    }, 
    function () {
        clearInterval(interval);
    }
);