代码之家 › 专栏 › 技术社区 › jeffreynolte

写这个函数的更有效/优化的方法是什么?

optimization jquery javascript

jeffreynolte · 技术社区 · 15 年前

我一直在尝试学习如何更快地编写更高效的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')
});

提前谢谢大家。

4 回复 | 直到 15 年前

Nick Craver 15 年前

你可以使用 .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对象。

Day 15 年前

以及使用 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');
});

编辑尼克改变了他的答案,使用链子,从而避免了重复使用 美元(这个) 首先。所以我会用他的版本来代替。

Pointy 15 年前

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

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

编辑尼克的主意也不错——你可以把我们的答案结合起来!

Rubens Mariuzzo Salakar 15 年前

作为一个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代码,应该避免使用 美元(…) 对于函数范围中的同一选择器。提高性能的一个更好的实践是使用一次它并将其存储在变量中。

编辑

在阅读答案之后 尖尖的 和 尼克克拉弗 对于您的代码来说,这种优化是不必要的。因为在这两个答案中,他们都利用了 $(this) 曾经。

局部放电 感谢您的评论/反馈!