Question

我正在尝试将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 );
    });

但是，在“每个”功能的范围内存储变量会涉及哪种性能障碍？（为避免在两个绑定中复制和粘贴变量）

$( '.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(){})()之类的原因是因为每个列表项都有自己的子项。

那么性能差异是什么？

Answer 1

我很困惑，但为什么不在同一个调用中将它们绑定在一起，因为它们看起来都是相同的。

.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 );

 })

jQuery性能，绑定在单个jQuery对象数组上，vs单个对象通过$（）。每个？

1 个答案: