gpt4 book ai didi

javascript - jQuery .hover() 性能疑虑

转载 作者:行者123 更新时间:2023-11-30 08:58:44 25 4
gpt4 key购买 nike

虽然我知道一些 jQuery 来简化前端操作编程,但我也知道一些“最佳实践”来提高浏览器的性能,比如通过 var 缓存并且总是从ID 选择器。但是我对这段代码存有疑虑。可以做得更好吗?

序言:此代码通过 .hover() 为(已缓存的)选择器内的几个 block 设置动画。

HTML 是这样的:

<div clas="block-link red">(...)</div>
<div clas="block-link yellow">(...)</div>
<div clas="block-link magenta">(...)</div>
<div clas="block-link moradopelusa">(...)</div>

还有 jQuery 动画在其中之一内悬停:

var cached_blocks = jQuery(.block-link);

jQuery(cached_blocks).hover(function(){
var this_block = jQuery(this),
this_block_text = jQuery(this_block).children(div.text),
this_block_image = jQuery(this_block).children(div.image),
this_block_link = jQuery(this_block).children(div.link),
this_block_link_icon = jQuery(this_block_link).children(a.icon);

/* Animate in; show everything */
jQuery(this_block_text).animate(..);
jQuery(this_block_image).animate(..);
jQuery(this_block_link).animate(..);
jQuery(this_block_link_icon).animate(..);

}, function() {
var this_block = jQuery(this),
this_block_text = jQuery(this_block).children(div.text),
this_block_image = jQuery(this_block).children(div.image),
this_block_link = jQuery(this_block).children(div.link),
this_block_link_icon = jQuery(this_block_link).children(a.icon);

/* Animate out; put everything where they belong */
jQuery(this_block_text).animate(..);
jQuery(this_block_image).animate(..);
jQuery(this_block_link).animate(..);
jQuery(this_block_link_icon).animate(..);
});

我看到我在悬停后再次声明变量,但我不知道有什么技巧可以不再做。不管怎样,即使那样它也很有魅力。

更新:固定代码 #1

var cached_blocks = jQuery(.block-link);

jQuery(cached_blocks).on('mouseenter mouseleave', function(){
var this_block = jQuery(this),
this_block_text = jQuery(this_block).children(div.text),
this_block_image = jQuery(this_block).children(div.image),
this_block_link = jQuery(this_block).children(div.link),
this_block_link_icon = jQuery(this_block_link).children(a.icon);

/* Animate in; show everything */
this_block_text.animate(e.eventType(...));
this_block_image.animate(e.eventType(...));
this_block_link.animate(e.eventType(...));
this_block_link_icon.animate(e.eventType(...));
});

注意 1:是的,我在代码的其他部分使用了 cached_blocks。

最佳答案

您似乎无缘无故地重复代码?

var cached_blocks = jQuery('.block-link');

cached_blocks.on('mouseenter mouseleave', function(e) {
var this_block = jQuery(this),
this_block_text = this_block.children('div.text'),
this_block_image = this_block.children('div.image'),
this_block_link = this_block.children('div.link'),
this_block_link_icon = this_block.children('a.icon');

this_block_text.animate({something: (e.type==='mouseenter' ? 0 : 400)});
this_block_image.animate({top: (e.type==='mouseenter' ? 10 : 200)});
this_block_link.animate({left: (e.type==='mouseenter' ? 300 : 40)});
this_block_link_icon.animate({right: (e.type==='mouseenter' ? 0 : 1400)});
});

除非您也在其他地方使用包含 text/image/link... 元素的变量,否则缓存它们只是为了在下一行与 animate() 一起使用是浪费空间。

关于javascript - jQuery .hover() 性能疑虑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11182025/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com