Question

I want to display a div when you hover over another DOM element, but I want to cancel this action if you move the mouse before the div is shown. So far this is what I have

HTML

<div id="msg">
    <a href="#" id="33"> HERE </a>
</div>

JS

var timer;
$("body").on('mouseenter', '#msg a',function(){
    var userHover = $(this).attr("id");
    timer = setTimeout(function () {
        alert(userHover);   
    }, 1000);
}).on('mouseleave', '#msg a', function(){

});

http://jsfiddle.net/Nyrdz/

Any help is appreciated.

Answer 1

You are looking for clearTimeout():

var timer;
$("body").on('mouseenter', '#msg a', function(){
    var userHover = $(this).attr("id");
    timer = setTimeout(function () {
        alert(userHover);   
    }, 1000);
}).on('mouseleave', '#msg a', function(){
    clearTimeout(timer);
});

However, in case you have more than one element matching #msg a I’d highly recommend you to store the timer value in the element-specific data.

$("body").on('mouseenter', '#msg a', function(){
    var userHover = $(this).attr("id");
    $(this).data('timer', setTimeout(function () {
        alert(userHover);   
    }, 1000));
}).on('mouseleave', '#msg a', function(){
    clearTimeout($(this).data('timer'));
});