Question

我有多个下拉框，在点击链接时会丢弃。如果盒子同时打开，盒子有可能重叠。

查询元素是否可见$('#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

Answer 1

更新

（2013年8月）看起来对jQuery的更改，简单地调用hide可能不再是最快的选项（尽管为了简洁和清晰，它可能仍然是可取的）。看一下这个updated benchmark test case。

<小时/> 首先，应该注意的是，它的运行时效果将是无穷小的，你很难创造一种情况，在这种情况下，这将成为你表现的瓶颈。

然而，第二种方法可能更快，因为它已经内置了if检查：

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

换句话说，该函数仅在DOM元素上执行，如果它还没有display: none。由于{＃1}}方法避免了较少的方法调用，因此.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);
// ...

简而言之，第二个更快 - jsPerf test-case。

Answer 2

我认为总是更快地隐藏它。另一个选项可能是为框示例var b = $（'＃box2'）创建一个引用。而不是叫$（'＃box2'）。我认为这是最好的选择。

Answer 3

你也可以使用.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
  });

});

jQuery性能：hide（）vs is（＆＃39;：visible＆＃39;） - 哪个更快？

3 个答案:

更新