Question

所以我想用jQuery滚动做几件事......

$(window).scroll(function() {
  //so it's not overly aggressive calling the funciton
  setTimeout(function(){check_scroll()}, 50);
});

然后......

function check_scroll(){
  var scroll = $(window).scrollTop()
  if(scroll > 100) {
    $("#fixed").addClass("fixed");
  }
  else
    $("#fixed").removeClass("fixed");  
};

所以，我的问题是，＃fixed将在大多数情况下使用“.fixed”类，所以如果我反复要求jQuery添加它，那么它会不具有效果吗？我应该首先检查它是否有类，然后尝试添加它？

现在看起来很好，但是我的应用程序会增长，并且会有很多js继续播放，所以我想让所有的性能变得可能。

Answer 1

我认为你不会因为元素已经存在的类调用addClass而受到性能影响。

你可以使用这个代码块，它应该运行良好，因为toggleClass在调用addClass或removeClass之前首先使用hasClass：

$("#fixed").toggleClass("fixed", scroll > 100);

Answer 2

如果你真的担心性能，那么$（'＃fixed'）将会引起更大的关注。你应该把它的结果粘贴在一个变量中，除非#fixed每次你查询时都会有不同的东西。

添加和删除课程的问题主要是“取决于”。添加和删除类实际上做了什么？它是否会改变页面的布局，或者您是否将其用作其他内容的标志？如果它改变了页面的布局，那么你别无选择。如果没有，那么您可以使用.data方法来存储避免reflow的状态（添加/删除类的主要性能问题）。

我还担心你的check_scroll函数会在实践中被调用多少次。您没有取消之前的setTimout事件，因此，最终会有一堆setTimeout调用。可能你想要更像的东西：

(function() {
  var timeout = null, fixed = $('#fixed'), win=$(window),
   check_scroll = function() {
      var scroll = win.scrollTop();
      fixed.toggleClass("fixed", scroll > 100);
      timeout=null;
   }
   win.scroll(function() {
      if (timeout) {
         // only do once every 50ms
         return;
      }
      timeout = setTimeout(check_scroll, 50);
   });

Answer 3

此代码应该没问题，

jquery文件只在浏览器中加载一次，一旦加载，它就完全可以运行了。每次调用文件执行命令时，浏览器都不需要重新加载它。

在我看来，你的代码应该没问题。

反复添加/删除类会减慢速度吗？

3 个答案: