Question

I have a div and when I point the mouse on it I want to fire an event.
But I want to fire it only if the cursor was on the event for some amount of time.

Any suggestions how to do this?

Answer 1

Here is an example:

$('#yourElement').on({
        mouseenter: function (){
            clearTimeout(testTimeout);       // [1]
            testTimeout = setTimeout(function(){  // [2]
                ...
            }, numberOfMiliseconds);
        },
        mouseleave: function () { //[3]
            clearTimeout(testTimeout);
        }
    }, '.whereIsYourElement');

[1] when mouse is entering the element, it removes the previous timeout and raise it [2] one more time. When the mouse is leaving the area [3] it also deletes timeout.
This gives the desirable effect, that the timeout executes only if the mouse entered and stayed in the element for some time.