1

我的问题是出于好奇，我很欣赏任何性能差异都可能是微不足道的。

我最近正在研究为图像地图制作一些悬停效果。与大多数其他人建议的使用 jQuery 的方法一样。以下是建议代码

$('#borders area').each(function(){
    var mapRegion = $(this).attr('class');
    $(this).hover(
        function(){
            $('#regions').addClass(mapRegion).show();
        },
        function(){
            $('#regions').hide().removeClass(mapRegion);
    });
});

这显然在<div id="regions">绝对位于底座上方的情况下工作正常，<img>并且另一个空白透明<img>放置在此上方用于<map id="borders">.

但是，我确实想知道使用 jQuery 执行以下操作是否更有意义（代码略少）

$('#borders area').each(function(){
    $(this).hover(
        function(){
            $('#regions').removeClass().addClass($(this).attr('class')).show();
        },
        function(){
            $('#regions').hide();
    });
});

由于没有设置变量，这会更快吗？如果没有提供参数，removeClass() 会更快吗？我想我也有兴趣知道哪个语义被认为更好。

4

2 回答 2

1

在我看来，更有意义的可能是：

$('#borders area').on('mouseenter mouseleave', function(e) {
    if (e.type == 'mouseenter') {
        $('#regions').removeClass().addClass(this.className).show();
    }else{
        $('#regions').hide();
    }
});

这样可以避免不必要的循环和 mouseenter hover()/mouseleave 的包装，并从本机属性中获取类名。

至于速度，你永远不会注意到差异。

于 2013-07-02T22:17:26.083 回答
1

由于没有设置变量，这会更快吗？如果没有提供参数，removeClass() 会更快吗？

由于您关心从学术角度了解性能差异是什么（因为可能永远不会有可感知的差异），我建议您自己做一些基准测试。

一个有用的在线工具：http: //jsperf.com/

于 2013-07-02T22:20:35.410 回答