CODEWITHSUNDEEP
javascriptjqueryperformanceprofilinghoverintent
James Cazzetta
James Cazzetta

Reputation: 3220

Why is the hoverintent function using so much CPU?

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:

enter image description here

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)

enter image description here

Upvotes: 3

Views: 240

Answers (1)

Matt MacLean
Matt MacLean

Reputation: 19656

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!");
});

Upvotes: 1

Related Questions