Search code examples
jqueryajaxhoversettimeoutdelay

ajax if hover is maintained for 500ms and doesn't fire if hover stops

I'd like to delay an ajax call until hover is maintained for 500ms

obj.hover(function(){ 
var t = setTimeout(function() {
    ajax_search();
}, 500);
}, function(){ 
clearTimeout($(this).data('timeout'));
});

does delay the ajax but it still fires even if I have stopped hovering.

It's being used for a map with lots of hover regions and I'd like to minimise ajax calls to those the user indicates with a longer hover. At the moment it fires for every single hover and on heroku/facebook app and chained hovers are killing the response for users.

Solution

  • You're not setting the data on the hover target. You're aquiring the handle (t) but not doing a $(this).data("timeout", t); after the setTimeout call.