Javascript 如何减少jquery代码的冗余并提高效率？

我对编写javascript比较陌生。下面的js代码是根据我在这里找到的上一个答案修改的。它确实做到了我希望它在功能方面所做的事情，但是，它是多余的，每次鼠标进入时都会调用代码（这需要比它需要的更多的资源）

关于如何减少冗余和提高效率，有什么建议吗

此处的简化演示：

HTML:

---

我已经减少了我能找到的所有冗余：

(function ($) {
    $.fn.hasScrollBar = function () {
        return this.get(0).scrollHeight > (this.height() + 1);
    }

    var $commercials = $( "#commercials" ),
        $photography = $( "#photography" ),
        $experiments = $( "#experiments" );

    var mouseEnterListner = function() {
        var arrow = $(this).find( '.scroll' );

        if ( $(this).hasScrollBar() ) {
            arrow.css({
                'visibility': 'visible'
            });
        } else {
            arrow.css({
                'visibility': 'hidden'
            });
        };
    };

    $commercials.on('mouseenter', function() {
        mouseEnterListner.call(this);
    });

    $photography.on('mouseenter', function() {
        mouseEnterListner.call(this);
    });

    $experiments.on('mouseenter', function() {
        mouseEnterListner.call(this);
    });
})(jQuery);

祝你好运，玩得开心

将事件绑定到容器并将其应用到容器中的元素，在本例中是指定的ID。然后在触发时查找相对于目标的元素：

$('.container').on('mouseenter','#commercials,#photography,#experiments', function(){
    var $this   = $(this),
        $scroll = $this.find('.scroll');

    if( $this.hasScrollBar() ){
        $scroll.css('visibility','visible');
    } else {
        $scroll.css('visibility','hidden');
    }   
});

(function ($) {
    $.fn.hasScrollBar = function () {
        return this.get(0).scrollHeight > (this.height() + 1);
    }
})(jQuery);

但实际上，我会用

”类别“

”取代

”、#商业广告、#摄影、#实验“

---

使用

.category

可以动态添加新的类别，并且在页面加载后创建事件时不必重新绑定事件，因为事件仍在容器中。

我就是这样做的

$（文档）.ready（函数（）{
滚动检查（）；
});
函数scrollCheck（）{
var div=''，
滚动=真；
$（'.category'）。每个（函数（索引）{
div=$（本）；
scroll=div.get（0）。scrollHeight易于阅读且无冗余代码：

var arrow1 = $('#commercials .scroll');
var arrow2 = $('#photography .scroll');
var arrow3 = $('#experiments .scroll');

function bindMouseEnter(id, arrow){

   $("#"+id).mouseenter(function () {

       if ($('#'+id).hasScrollBar()) {
          arrow.css({
            'visibility': 'visible'
          });
      } else {
        arrow.css({
            'visibility': 'hidden'
        });
      }
    });

}

bindMouseEnter('commercials', arrow1);
bindMouseEnter('photography', arrow2);
bindMouseEnter('experiments', arrow3);


(function ($) {
    $.fn.hasScrollBar = function () {
        return this.get(0).scrollHeight > (this.height() + 1);
    }
})(jQuery);

根据Vijay的回答，我们可以组合选择器：

(function ($) {
    $.fn.hasScrollBar = function () {
        return this.get(0).scrollHeight > (this.height() + 1);
    }

    $("#commercials,#photography,#experiments").on('mouseenter', function() {
        var arrow = $(this).find('.scroll');

        if ( $(this).hasScrollBar() ) {
            arrow.css({
                'visibility': 'visible'
            });
        } else {
            arrow.css({
                'visibility': 'hidden'
            });
        };
    };
})(jQuery);

如果这些ID有一个公共类名，例如：
.content block
，那么（）

只需添加一次。虽然我将原始代码尽可能靠近@Zach，因为我们正在处理

mouseenter

事件，任何

div

重叠都会产生一些恶劣影响；）请看我的答案，了解我的意思。我投票结束这个问题，因为它属于Perfect。你的建议与。分类完美。谢谢。

$(document).ready(function(){
    scrollCheck();
});

function scrollCheck() {
    var div = '',
        scroll = true;
    $('.category').each(function( index ) {
        div = $(this);
        scroll = div.get(0).scrollHeight <= (div.height() + 1);
        console.log(scroll); // just a check
        if (scroll) {
            div.children('.scroll').remove();
        }
    });
}

var arrow1 = $('#commercials .scroll');
var arrow2 = $('#photography .scroll');
var arrow3 = $('#experiments .scroll');

function bindMouseEnter(id, arrow){

   $("#"+id).mouseenter(function () {

       if ($('#'+id).hasScrollBar()) {
          arrow.css({
            'visibility': 'visible'
          });
      } else {
        arrow.css({
            'visibility': 'hidden'
        });
      }
    });

}

bindMouseEnter('commercials', arrow1);
bindMouseEnter('photography', arrow2);
bindMouseEnter('experiments', arrow3);


(function ($) {
    $.fn.hasScrollBar = function () {
        return this.get(0).scrollHeight > (this.height() + 1);
    }
})(jQuery);

(function ($) {
    $.fn.hasScrollBar = function () {
        return this.get(0).scrollHeight > (this.height() + 1);
    }

    $("#commercials,#photography,#experiments").on('mouseenter', function() {
        var arrow = $(this).find('.scroll');

        if ( $(this).hasScrollBar() ) {
            arrow.css({
                'visibility': 'visible'
            });
        } else {
            arrow.css({
                'visibility': 'hidden'
            });
        };
    };
})(jQuery);