Only Make AJAX Call if Mouse Hover For 2 Seconds

Question

I have an AJAX call that I only what to make if I've moused over a certain element for 2 seconds and to NOT make the call otherwise. I've tried to use setTimeout but it makes the call anyways. How can I achieve this?

Here is my code:

$('tr').mouseenter(function(){

    $( this ).next("#ticket_summary").show();
    var context = $( this ).next("#ticket_summary");
    var ticket_id = $( this ).next("#ticket_summary").data("id");
    var url = "/support/ticket_description/" + ticket_id.toString();
    console.log(url);
    setTimeout(function(){
    $.ajax({
        url: url,
        type: "GET",
        dataType: "json",
        success: function(data) {
            context.find('#ticket_summary_description').html(data[1]['fields']['text']);
            context.find('#ticket_summary_last_comment').html(data[2]['fields']['text']);
        },
        error: function(data) {
            context.find('#ticket_summary_description').html('error');
            context.find('#ticket_summary_last_comment').html('error');
        }
    });
    }, 2000);
});

Look here for some suggestions: http://stackoverflow.com/questions/435732/delay-jquery-hover-event — David Tansey, Aug 21 '14 at 14:51

Matyas · Accepted Answer · 2014-08-21T15:09:11.127

The thing is that you have to cancel the timeout with clearTimeout if the user moves away.

Demo Fiddle

To detect when the user "un-hovers" use: mouseleave
To only handle the event once we use one
To cancel the timeout use: clearTimeout

The code should be something like:

$('.the-element').on('mouseenter', function (e) {
     var timeout = setTimeout(function () { ... }, 2000 );
     $(e.target).one('mouseleave', function () {
         clearTimeout(timeout)'
     });
});

score 1 · Answer 2 · answered Aug 21 '14 at 15:02

I think this will work.

HTML:

<a id='test'>LINK</a>

JavaScript:

$("#test").mouseenter(function(){
    setTimeout(function(){
        $.ajax({
            url:"test.php",
            success:function(){
                alert("success");
            },
            error:function(){
                alert("ERROR");
            }
        });
    },5000);
});

jsFiddle:

jsFiddle

Only Make AJAX Call if Mouse Hover For 2 Seconds

2 Answers2