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する.style-swatches liこと) を検討したり、すべてを jQuery オブジェクトにラップする代わりにネイティブ DOM を使用したりできます...

他のいくつかの回答がすでに指摘しているように、実際にはループはまったく必要ありません..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

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 に答える
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 に答える