Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/429.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 为什么hoverintent函数使用了这么多CPU?_Javascript_Jquery_Performance_Profiling_Hoverintent - Fatal编程技术网

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

Javascript 为什么hoverintent函数使用了这么多CPU?,javascript,jquery,performance,profiling,hoverintent,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 ), ta

我已经实现了以下插件:

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 );
        })();
    }
};
下面是(Google Chrome开发工具)配置文件的打印屏幕,您可能会注意到函数
hovercheck
使用的数量:

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

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

在不同浏览器中进行测试后,我还注意到Internet Explorer 8(Windows XP)在触发
hoverintent
事件后立即崩溃。 这是(Internet Explorer)配置文件的另一个打印屏幕。(有趣的部分可能是
querySelectAll()
DOM函数)

  • 你知道为什么InternetExplorer8会崩溃吗
  • 解决方案

    • 问题不在于悬停检查功能。大部分时间都花在事件处理程序内部

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

      第二个打印屏幕的英文表头是:功能、金额、包含时间(毫秒)、排除时间(毫秒)、功能类型你说得对!我有大量的代码被执行了很多次。。我在事件处理程序中优化/缩短了代码,现在它运行得更快了。有趣的是:从jQuery 1.9.1更新到1.10.1首先奇怪地解决了这个问题,优化代码只是让它更快了。。
      $("#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!");
      });