[英]What would be a more efficient / optimized way of writing this function
I have been trying to learn how to write faster more efficient jQuery and would like to get some insight on how I should write this function so it will work faster. 我一直在尝试学习如何编写更快,更高效的jQuery,并希望对如何编写此函数以便使其更快地工作有一些见解。 Should i use variables, I am most concerned with speed on a page so what will run more optimal cross browser and why is the answer I would like to see.
我应该使用变量,但我最关心页面的速度,因此什么可以运行更优化的跨浏览器,为什么我希望看到答案。
$("#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')
});
Thanks all in advance. 在此先感谢所有人。
You can use .delegate()
here, like this: 您可以在此处使用
.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');
});
This attaches a pair of handlers on #div-one
and #div-two
instead of a pair per <tr>
inside each, this means quicker binding and just relies on event bubbling for listening to the events. 此附接在一对处理程序
#div-one
和#div-two
而不是每一对<tr>
内的每个,这意味着更快的结合,只是依赖于事件冒泡用于收听的事件。 Also inside the function you can chain, no need to create another $(this)
jQuery object. 同样,您可以在函数内部进行链接,而无需创建另一个
$(this)
jQuery对象。
You could write another utility function to give you the toggle callbacks: 您可以编写另一个实用程序函数为您提供切换回调:
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')
);
edit also Nick's idea is good - you can combine both our answers! 还要编辑 Nick的想法很好-您可以结合我们的答案!
As well as using delegate
as suggested by Nick, you can also reuse the result of $(this)
for an additional micro optimization. 除了使用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');
});
Edit Nick changed his answer to use chaining thus avoiding the reuse of $(this)
in the first place. Edit Nick更改了使用链接的答案,从而避免了
$(this)
的重用。 So I'd go with his version instead. 所以我改用他的版本。
As a jQuery developer I have a simple rule, if I will use a selector more than one time in a scope I store it in a variable. 作为一名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');
});
I have heard or read that jQuery use some kind of cache when using $(...)
for same selectors or objects. 我听说过或读过,当对相同的选择器或对象使用
$(...)
时,jQuery使用某种缓存。 jQuery itself use to wrap the keyword this
and store it in local variable. jQuery本身用于包装关键字
this
并将其存储在局部变量中。
Brief, to optimize jQuery code you should avoid to use $(...)
for the same selector in a function scope. 简而言之,要优化jQuery代码,应避免在函数作用域中对同一选择器使用
$(...)
。 A better practice to improve performance is to use it once and store in a variable. 改善性能的更好方法是使用一次并存储在变量中。
EDIT 编辑
After reading answers from Pointy and Nick Craver it wouldn't be necessary this kind of optimization for your code. 阅读了Pointy和Nick Craver的回答后,就不必对代码进行这种优化了。 Because in both answers, they make use of
$(this)
once. 因为在两个答案中,它们都只使用
$(this)
。
PD Thanks for your comment/feedback! PD感谢您的评论/反馈!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.