2

リンクをクリックするとドロップする複数のドロップダウン ボックスがあります。ボックスが同時に開いている場合、ボックスが重なる可能性があります。

$('#box').is(':visible')要素が表示されているかどうかを照会してから、ボックスが表示されているかどうかを照会して非表示にする$('#box').hide()か、単に非表示にするように指示する方が高速ですか?

議論のために、ボックスが開いている時間の 50% と、ボックスが既に隠されている時間の 50% を考えてみましょう。

TL;DR

これは：

$("#box1-link").on("click", function(e){
    e.preventDefault();
    if($('#box2').is(':visible')) {
        $('#box2').hide();
    }

    $('#box1').slideDown(200, function() {
    });
});

またはこれ：

$("#box1-link").on("click", function(e){
    e.preventDefault();
    $('#box2').hide();

    $('#box1').slideDown(200, function() {
    });
});

長い目で見れば速い？- リンクがクリックされる時間の 50% で box2 が非表示になっていると仮定します。

4

3 に答える 3

4

アップデート

(2013 年 8 月) jQuery への変更により、単純に呼び出すhideことはもはや最速のオプションではない可能性があるようです (ただし、簡潔さと明快さのために、おそらくまだ好ましいと思われます)。この更新されたベンチマーク テスト ケースをご覧ください。

まず、これによる実行時の影響はごくわずかであり、これがパフォーマンスのボトルネックとなるような状況を作り出すのは難しいことに注意してください。

ただし、2 番目のアプローチは、そのifチェックが既に組み込まれているため、より高速になる可能性があります。

// ... line 7996 (jQuery 1.8.1):
if (!values[index] && display !== "none") {
    jQuery._data(elem, "olddisplay", display);
}​
// ...

言い換えれば、関数は、DOM 要素がまだない場合にのみ実行されますdisplay: none。.is()メソッド呼び出しが少なくなるため、メソッドが少し速くなる可能性はまだありますが、メソッド自体を見ると、これらの懸念はすぐに払拭されます。

// ...line 6804:
return !!selector && (
    typeof selector === "string" ?
        // If this is a positional/relative selector, check membership in the returned set
        // so $("p:first").is("p:last") won't return true for a doc with two "p".
        rneedsContext.test(selector) ?
            jQuery(selector, this.context).index(this[0]) >= 0 :
            jQuery.filter(selector, this).length > 0 : 
        this.filter(selector).length > 0);​
// ...

要するに、2 番目のほうが高速です -- jsPerf test-case。

于 2012-09-07T05:34:48.213 に答える
0

常に非表示にする方が速いと思います。もう 1 つのオプションは、ボックスの例 var b = $('#box2') の参照を作成することです。$('#box2') を呼び出すのではなく、これが最良の選択肢になると思います。

于 2012-09-07T05:14:02.513 に答える
0

これにも .toggle() 関数を使用できます。

var $box1 = $('#box1'),
    $box2 = $('#box2');
$('.majorDiv').on('click', '#box1-link', function(e){

  var $this = $(this);
  e.preventDefault();

  $box1.fadeToggle();
  $box2.slideDown(200, function(){
    //do stuff here
  });

});
于 2012-09-07T05:34:44.053 に答える