1

我有一个功能可以做这样的事情：

function my_function() {
  if ($('#footer').outerHeight() > 100) {
  $('#footer').height(...) ;
  $('#footer').css(....) ;
}

每次滚动时都会调用该函数，所以我想知道这样做 $('#footer') 这么多次是否有那么糟糕。如果是这样，解决这个问题的好方法是什么？

4

6 回答 6

4

我认为您需要这样的解决方案来提高性能。

如何提高页面中 java 脚本的性能？

要避免哪些常见的 jQuery 陷阱？

于 2013-01-08T14:08:44.890 回答
2

您应该像这样链接您的函数并缓存您的选择器：

function my_function() {
  var footer = $('#footer');
  if (footer.outerHeight() > 100) {
      footer.height(...).css(....);
  }
}

您甚至可以移动函数的var footer = $('#footer');外部使其成为全局函数以进一步改进它。

于 2013-01-08T13:48:29.237 回答
0

另一种选择是使用with语句，但不推荐：

function my_function() {
    with ($("#footer")) {
        if (outerHeight() > 100) {
            height(...).css(...);
        }
    }
}
于 2013-01-08T13:56:33.437 回答
0

其他答案很好，但是如果您根本不想评估 if 语句（第一次之后），请尝试以下操作：

var $footer;
var footerEvaled = false;
function my_function() {
if(footerEvaled == false)
{
   $footer = $footer || $('#footer');
    if ( $footer.outerHeight() > 100) {
         $footer.height(...) ;
         $footer.css(....) ;
         footerEvaled = true;
    }
}

}
于 2013-01-08T13:52:50.893 回答
0

你可以这样做：

var $footer;
function my_function() {
    $footer = $footer || $('#footer');
    if ($footer.outerHeight() > 100) {
        $footer.height(...) ;
        $footer.css(....) ;
    }
}
于 2013-01-08T13:48:44.643 回答
0

您可以在函数之前将 $('#footer') 存储在变量中。例如：

var footerHTML = $('#footer');
function my_function() {
  if ( footerHTML.outerHeight() > 100) {
  footerHTML.height(...) ;
  footerHTML.css(....) ;
}

这将避免为同一元素创建多个 JQuery 实例。

于 2013-01-08T14:08:35.637 回答