Make function execute after user hovers over link for 2 seconds

Question

Yes, I know this question has been asked before, but I can't find an answer that works. This is an accepted answer from one of the other questions:

$('#element').hover(function()
{
    $(this).data('timeout', window.setTimeout(function()
    {
        alert('hovered for 2 seconds');
    }, 2000));
},
function()
{
    clearTimeout($(this).data('timeout'));
    alert('mouse left');
});

http://jsfiddle.net/nCcxt/

As you see it doesn't do what it's supposed to.

What I need is simple in theory but I can't get it to work - when a user hovers over a link for 2 seconds, a function is called. If the user moves the mouse away before 2 seconds pass, nothing happens.

Answer 1

The code works perfectly fine. It only breaks due to the alert() calls which causes the mouseout event to be triggered.

What do we learn from it? Do not use alert() in combination with focus/hover/mousemove-related events.

By the way, there are already jQuery plugins available for what you want to do: http://cherne.net/brian/resources/jquery.hoverIntent.html