Question

我一直在努力学习如何编写更快更高效的jQuery，并希望了解我应该如何编写这个函数，以便它能更快地运行。如果我使用变量，我最关心的是页面上的速度，那么什么才能运行更优化的跨浏览器，为什么我希望看到答案。

    $("#div-one, #div-two").find('tr').hover(function(){
    $(this).find('a').stop().animate({color:"#FFF"}, 'fast');
    $(this).stop().animate({
        backgroundColor:"#7DBE36"
    }, 'fast');
}, function(){
    $(this).find('a').stop().animate({color:"#000"}, 'fast');
    $(this).stop().animate({
        backgroundColor:"#FFF"
     }, 'fast')
});

提前全部谢谢。

Answer 1

您可以在此处使用.delegate()，如下所示：

$("#div-one, #div-two").delegate('tr', 'mouseenter', function(){
    $(this).stop().animate({ backgroundColor:"#7DBE36" }, 'fast')
           .find('a').stop().animate({ color:"#FFF" }, 'fast');
}).delegate('tr', 'mouseleave', function(){
    $(this).stop().animate({ backgroundColor:"#FFF" }, 'fast')
           .find('a').stop().animate({ color:"#000" }, 'fast');
});

这会在#div-one和#div-two上附加一对处理程序，而不是每个 <tr>内的一对，这意味着更快的绑定并且只依赖于事件冒泡听取这些事件。在函数内部，您可以链接，无需创建另一个$(this) jQuery对象。

Answer 2

您可以编写另一个实用程序函数来为您提供切换回调：

function animCallback(linkColor, bgColor) {
  return function() {
    $(this).stop().animate({backgroundColor: bgColor}, 'fast')
      .find('a').stop().animate({color: linkColor}, 'fast');
  };
}
$('#div-one, #div-two').find('tr').hover(
  animCallback('#FFF', '#7DBE36'),
  animCallback('#000', '#FFF')
);

编辑尼克的想法也很好 - 你可以把我们的答案结合起来！

Answer 3

除了使用Nick建议的delegate之外，您还可以重复使用$(this)的结果进行额外的微优化。

$("#div-one, #div-two").delegate('tr', 'mouseenter', function(){
    var $this = $(this);
    $this.find('a').stop().animate({color:"#FFF"}, 'fast');
    $this.stop().animate({ backgroundColor:"#7DBE36" }, 'fast');
}).delegate('tr', 'mouseleave', function(){
    var $this = $(this);
    $this.find('a').stop().animate({color:"#000"}, 'fast');
    $this.stop().animate({ backgroundColor:"#FFF" }, 'fast');
});

编辑 Nick改变了他使用链接的答案，因此首先避免重复使用$(this)。所以我会选择他的版本。

Answer 4

作为一个jQuery开发人员，我有一个简单的规则，如果我在一个范围内多次使用一个选择器，我将它存储在一个变量中。

$("#div-one tr, #div-two tr").hover(function() {
    var $this = $(this);
    $this.find('a').stop().animate({color:"#FFF"}, 'fast');
    $this.stop().animate({backgroundColor:"#7DBE36"}, 'fast');
}, function(){
    var $this = $(this);
    $this.find('a').stop().animate({color:"#000"}, 'fast');
    $this.stop().animate({backgroundColor:"#FFF"}, 'fast');
});

我听说或读过jQuery在对同一个选择器或对象使用$(...)时使用某种缓存。 jQuery本身用来包装关键字 this并将其存储在本地变量中。

简而言之，为了优化jQuery代码，您应该避免在函数作用域中使用$(...)作为相同的选择器。提高性能的更好方法是使用它一次并存储在变量中。

修改

在阅读 Pointy 和 Nick Craver 的答案后，您的代码无需进行此类优化。因为在这两个答案中，他们都会使用$(this)一次。

PD 感谢您的评论/反馈！

什么是更有效/优化的写这个功能的方式

4 个答案: