Why is the hoverintent function using so much CPU?

Question

I have implemented the following plugin:

jQuery.event.special.hoverintent = {
    pxDelta: 7,
    pxRate:  100,
    bindType: "mouseover",
    delegateType: "mouseover",
    handle: function( event ) {
        var args = Array.prototype.slice.call( arguments, 0 ),
            target = jQuery( event.target ),
            cfg = jQuery.event.special.hoverintent,
            cX, cY, pX, pY, timer;

        function clear() {
            target
                .off("mousemove", getpx )
                .off("mouseout", clear );
            clearTimeout( timer );
        }
        function getpx( e ) {
            cX = e.pageX;
            cY = e.pageY;
        }
        target
           .on( "mousemove", getpx )
           .on( "mouseout", clear );

        (function hovercheck() {
            if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.pxDelta) {
                clear();
                // Normally we'd need to reset this but it is async
                event.type = "hoverintent";
                return event.handleObj.handler.apply( event.target, args );
            }
            pX = cX;
            pY = cY;
            timer = setTimeout( hovercheck, cfg.pxRate );
        })();
    }
};

I'm calling it like this:

$("#mainnav").find("ul.tabs > li > a").on("hoverintent", function(){ //... }

Here's a printscreen of the (Google Chrome Dev Tool) profile where you might notice the amount the function hovercheck uses:

• Why is the hovercheck function using so much CPU?
• How can this function be improved?

---

UPDATE: Internet Explorer 8 (Windows XP only) crashing

After testing in different browsers I also noticed that the Internet Explorer 8 (Windows XP) crashes as soon as the hoverintent event is triggered. Here's another printscreen of the (Internet Explorer) profile. (Interesting part might be the querySelectAll() DOM function)

• Any ideas why Internet Explorer 8 crashes?
• Solutions?

Answer 1

The issue is not the hovercheck function. Most of the time is spent inside the event handler.

$("#mainnav").find("ul.tabs > li > a").on("hoverintent", function() { 
    /* all the time is spent here, what is this code? */ 
    /* try putting something simple here to see if the performance issue goes away */
    console.log("in event handler!");
});