jQuery的性能，綁定在單個jQuery對象數組，通過$（）與單個對象綁定。

我試圖將一個mouseenter和mouseleave事件綁定到容器中的每個<li>，但是這兩個事件都共享了我希望在這兩個事件之間共享的幾個通用變量。

我知道這將是非常簡單的做這樣的事情：

$('.nav li') 
    .on('mouseenter', function() 
    { 
     var $children = $(this).find('.children'), 
      h   = $children.children().outerHeight(), 
      speed  = 250; 
     $children 
      .stop().clearQueue() 
      .animate({ height: h }, speed); 
    }) 
    .on('mouseleave', function() 
    { 
     var $children = $(this).find('.children'), 
      h   = $children.children().outerHeight(), 
      speed  = 250; 
     $children 
      .stop().clearQueue() 
      .animate({ height: 0 }, speed); 
    });

但是什麼樣的性能hinderances將被捲入「每個」功能的範圍內存儲變量？（爲了避免兩者綁定複製和粘貼變量）

$('.nav li').each(function() 
{ 
    var $children = $(this).find('.children'), 
     h   = $children.children().outerHeight(), 
     speed  = 250; 

    $(this) 
     .on('mouseenter', function() 
     { 
      $children 
       .stop().clearQueue() 
       .animate({ height: h }, speed); 
     }) 
     .on('mouseleave', function() 
     { 
      $children 
       .stop().clearQueue() 
       .animate({ height: 0 }, speed); 
     }); 
});

我沒有使用像(function(){})()的原因是因爲每個項目都有它自己的孩子。

那麼，性能差異是什麼？

來源

2013-02-26 Morgan Delaney

您將在綁定時獲得稍大的性能，但事件執行速度會稍快一點。這可能是不成熟的優化。假設這是一個導航菜單，兩者之間的差異可以忽略不計，我懷疑你有成千上萬的導航項目。 – 2013-02-26 20:01:55

我很困惑，但爲什麼不只是在同一個調用中綁定它們，因爲它們看起來都是相同的。

.bind('mouseenter mouseleave', function(event){ 
    var $children = $(this).find('.children'), 
    h   = event.type == "mouseenter" ? $children.children().outerHeight() : 0, 
    speed  = 250; 
     $children 
      .stop().clearQueue() 
      .animate({ height: h }, speed); 

})

來源

2013-02-26 20:10:39

是的，這將在這個特定的例子中工作，謝謝。想象一下，每個函數中都有更復雜的代碼，唯一的相似之處就是一些變量。你會怎麼做？間歇性三元運算符集羣不是我的首選解決方案。 – 2013-02-26 20:57:56

jQuery的性能，綁定在單個jQuery對象數組，通過$（）與單個對象綁定。

回答

相關問題