Question

如果你有一个能够触发滚动事件的功能，那就更好了。

检查某个类是否已添加，是否已添加
不要做任何检查，只需在每次需要时添加课程。

$(document).on('scroll', function () {
   var scrollTop = $(this).scrollTop();
   if (scrollTop > 50) {
      if (!$("nav .branding").hasClass("collapse"))
         $("nav .branding").addClass("collapse");
   } else {
      if ($("nav .branding").hasClass("collapse"))
         $("nav .branding").removeClass("collapse");
   }
});

或

$(document).on('scroll', function () {
   var scrollTop = $(this).scrollTop();
   if (scrollTop > 50) {
      $("nav .branding").addClass("collapse");
   } else {
      $("nav .branding").removeClass("collapse");
   }
});

第一次有一个额外的检查，但在另一个行动中可能（？）是一个更激烈的操作（？）

Answer 1

就像你说的那样，.hasClass()是一个额外的检查，占用了浏览器的记忆。 .addClass()首先在内部进行检查，然后仅在特定类不存在时添加。

因此，显然，.addClass()和.removeClass()比使用.hasClass()首次检查更具效果。基本上，使用.hasClass()是一项额外的无用工作。

这是一个片段，用于证明.addClass()已经检查了现有的类，或者没有复制类名：

＆＃13;

$(function () {
  $("#classCheck").addClass("class");
  $("#classCheck").addClass("class");
});

＆＃13;

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div id="classCheck"></div>

＆＃13;

我请求大家将上述代码段视为.addClass()不重复类名称的证据。

在控制台中进行简单的检查会告诉您，使用同一个班级多次调用addClass是安全的。

具体来说，您可以在the source中找到支票：

if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
  setClass += classNames[ c ] + " ";
}

此外，正如注释中指出的Alex，如果存储jQuery选择器对象，则可以提高性能。您可以使用：$("nav .branding")而不是多次使用$nav_branding = $("nav .branding")，而是使用变量。

Answer 2

第二个是首选，因为根据现有类调用addClass/removeClass会导致不显眼的后果。

意思是，如果调用了addClass并且该类已经存在，则不会再次添加它。

删除相同。如果该类不存在，则不执行任何操作

Answer 3

第一种解决方案更快，但不是很多。（读：应该是无关紧要的） https://github.com/jquery/jquery/blob/master/src/attributes/classes.js

如果你想要平稳的表现，我会建议限制这个功能。

阅读：https://remysharp.com/2010/07/21/throttling-function-calls

限制可确保每n ms调用一次函数。

$(document).on('scroll', throttle(500, function () {
  var scrollTop = $(this).scrollTop();
  if (scrollTop > 50) {
    if (!$("nav .branding").hasClass("collapse")){
      $("nav .branding").addClass("collapse");
    }
  } else {
    if ($("nav .branding").hasClass("collapse")) {
      $("nav .branding").removeClass("collapse");
    }
  }
}));

编辑：

因为@kitler提到存储对dom元素的引用是一个很好的提示。这可以防止jquery每次都必须找到元素。

Answer 4

我选择选项2，因为你在选项1中选择了jQuery DOM，只是为了测试这个类是否可用，这应该是其中的一部分。

话虽这么说，但最好只在函数之外存储一次DOM对象的引用，并仅对该引用进行处理。

哪个表现更好，检查课程或添加课程

4 个答案:

编辑：