Question

I need to be able to cancel an event based on the amount of time an element is hovered on. Say when I set the delay to 500ms, when the element is being hovered on for less than that, an event should be cancelled, otherwise it is fired. The delay() and setTimeout() function seem incapable of doing that.

Answer 1

You can try something like this instead of using jQuery delay method.

Working demo

var timeoutId = null;
$("selector").hover(function(){
   if(timeoutId)
      clearTimeout(timeoutId);

    timeoutId = setTimeout(function(){
        alert("do your stuff here");
    }, 5000); 
}, function(){
    clearTimeout(timeoutId);
});