为什么hoverintent函数使用了这么多CPU?

时间:2013-06-10 10:02:55

标签: javascript jquery performance profiling hoverintent

我已经实现了以下插件:

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 );
        })();
    }
};

我这样称呼它:

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

这是(Google Chrome开发工具)个人资料的打印屏幕,您可能会注意到hovercheck功能使用的数量:

enter image description here

  • 为什么hovercheck功能使用了这么多CPU?
  • 如何改进此功能?

更新: Internet Explorer 8(仅限Windows XP)崩溃

在不同的浏览器中测试后,我也注意到一旦hoverintent事件被触发,Internet Explorer 8(Windows XP)就会崩溃。 这是(Internet Explorer)配置文件的另一个打印屏幕。 (有趣的部分可能是querySelectAll() DOM功能)

enter image description here

  • Internet Explorer 8崩溃的任何想法?
  • 解决方案?

1 个答案:

答案 0 :(得分:1)

问题不在于hovercheck功能。大部分时间都花在事件处理程序中。

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