1

我最近在 stackoverflow 上得到了你们伟大人物的帮助，帮助我在鼠标悬停事件上将背景图像移动到适当的距离。这很好用，但问题是我担心它使用每个函数的优化程度。

我希望我能简要解释一下如何将这个特定代码转换为 for 循环，因为我对优化的好处很感兴趣，但我不太了解如何将其转换为 for 的语法差异环形。

var xPosition = -195;
$('div.style-swatches ul li').each(function(){
    $(this).mouseenter(function(){
        $(this).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(this).index() * 195)) + "px 0");
    });
});
4

5 回答 5

4

根本不使用.each()

演示小提琴

$("div.style-swatches li").mouseenter(function() {
     $(this).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(this).index() * 195)) + "px 0");
});
于 2013-10-30T22:43:09.543 回答
2

永远不要在没有基准的情况下进行优化。首先分析您的代码，收集真实数据，查看哪些函数调用真正占用了大量时间/内存，然后优化发现的性能瓶颈。

在您的特定情况下，我希望 DOM 查询比循环构造多花费几个数量级的时间。您可以考虑简化您的 CSS 查询（例如，在适当的情况下更改div.style-swatches ul li为），使用本机 DOM 而不是将所有内容包装在 jQuery 对象中，....style-swatches li

正如其他一些答案已经指出的那样，您实际上根本不需要循环，因为.mouseenter()已经这样做了（并且在.each()内部使用了循环）。

于 2013-10-30T22:44:02.657 回答
1

任何选择都会在后台使用 for 循环。基本上，任何时候你看到 $(".css-selector") 都会想，“对于所有匹配的元素”。在您的代码中， .each(...) 只是使过程更加明确。

如果你真的想把它分解成一个 for 循环，你可以使用你的选择器，然后直接索引元素，例如：

var elems = $('div.style-swatches ul li');
for (var i = 0; i < elems.length; ++i){
  $(elems[i]).mouseenter(function(){
        $(this).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(this).index() * 195)) + "px 0");
    });

}

但同样，由于 jQuery 自己已经做到了这一点，您是否会看到任何有益的性能影响是值得怀疑的。

于 2013-10-30T22:42:40.290 回答
0

$('div.style-swatches ul li') 返回和项目数组..只需循环它

var xPosition = -195;
var items     = $('div.style-swatches ul li');

for (var i = 0, l = items.length; i < l; i++) {
    $(items[i]).mouseenter(function(){
        $(items[i]).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(items[i]).index() * 195)) + "px 0");
    });
}
于 2013-10-30T22:43:42.827 回答
0

jquery 选择器返回一个数组。你可以迭代它

var xPosition = -195;
var elements = $('div.style-swatches ul li');
for(var i = 0; i < elements.length; i++) {
    $(elements[i]).mouseenter(function() {
        $(this).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(this).index() * 195)) + "px 0");
    });
}
于 2013-10-30T22:42:43.593 回答