2

我有多个下拉框，当它们的链接被点击时它们会掉落。如果它们同时打开，这些盒子可能会重叠。

查询元素是否可见$('#box').is(':visible')以及框是否可见以隐藏它$('#box').hide()或只是告诉它隐藏它是否更快？

为了争论，假设盒子有 50% 的时间是打开的，而 50% 的时间它已经隐藏了。

TL;博士

这是：

$("#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() {
    });
});

从长远来看更快？- 假设 box2 在 50% 的链接被点击时被隐藏

4

3 回答 3

4

更新

（2013 年 8 月）看起来随着对 jQuery 的更改，简单地调用hide可能不再是最快的选择（尽管为了简洁和清晰起见，它可能仍然是可取的）。看看这个更新的基准测试用例。

首先，应该注意的是，它的运行时影响将是无限小的，您将很难创造一种情况，在这种情况下，这将成为您性能的瓶颈。

然而，第二种方法可能会更快，因为它已经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);​
// ...

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

于 2012-09-07T05:34:48.213 回答
0

我认为总是隐藏它更快。另一种选择是为盒子示例 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 回答