2013-06-10 4 views
3

Я осуществил следующий плагин:Почему функция hoverintent использует столько CPU?

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(){ //... } 

Вот PrintScreen из (Google Chrome Dev Tool) профиля, где вы могли бы заметить сумму в функция hovercheck использует:

enter image description here

  • Почему функция hovercheck использует столько CPU?
  • Как можно улучшить эту функцию?

UPDATE: Internet Explorer 8 (только для Windows XP) сбой

После тестирования в различных браузерах я также заметил, что Internet Explorer 8 (Windows XP) падает, как только hoverintent события запускается. Вот еще один экран для печати профиля (Internet Explorer). (Интересная деталь может быть функция querySelectAll() DOM)

enter image description here

  • Любые идеи, почему Internet Explorer 8 аварий?
  • Решения?
+0

Таблица глава 2-го PrintScreen на английском языке, являются: функции, количество, в комплекте времени (мс) Исключен время (мс), тип функции –

ответ

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

Вы правы! У меня было огромное количество кода, который выполнялся много раз. Я оптимизировал/сократил этот код в обработчике событий, и теперь он работает быстрее. –

+0

Что смешно: обновление с jQuery 1.9.1 до 1.10.1 странно решило проблему на первом месте, оптимизация кода просто сделала его быстрее .. –

Смежные вопросы