Question

我想知道是否在jQuery .scroll（）中使用if-else来比较位置和以下函数：

offset = $(window).scrollTop()

和

nameVar = $("#divID").offset()

这些比较还在.scroll（）中添加了css样式，我有四个if-else语句。我试图找出在比较DIV时是否会遇到性能问题＆＃39;位置。

在我的第一次测试中，页面加载正常，但如果我打开页面，我发现它变得非常迟钝。

所以：

在scroll()内使用if-else是一种更好的方法吗？
我使用if-else错误吗？
还有其他方法吗？

Answer 1

一般来说，发现页面上的div将比一对if语句的计算成本更高。只要你像这样缓存查找（滚动处理程序的外部）：

var $myDivOfAwesome = $('#awesomeDiv');
$(document).scroll(function() {
  if ($myDivOfAwesome.position().top > 1337) {
    // do stuff...
  }
});

你应该没事。

如果您仍想比较不同的代码段以确定更快的内容，请查看JSperf

Answer 2

问题是在滚动操作期间可以非常快速地调用.scroll()个事件。您需要非常快速地响应给定事件，或者您需要推迟处理滚动事件（通常使用计时器），直到用户使用滚动条暂停并停止移动它。这些行为中的任何一种都可以防止滞后行为。

几个if语句几乎没有时间。但是，执行重型选择器查询或特别是进行重新布局和重新绘制的页面更改会占用大量CPU。

对于你在卷轴处理程序中能做什么和不能做什么没有正确或错误的描述，并没有看到滞后行为，因为它取决于你正在做什么，你正在运行它的计算机，如何您可能会因为您的行为而导致的重复和重新布局操作等...您可以做的最好的事情就是决定采取延迟路线，这样您就不会在用户暂停滚动之前进行更改，或者您必须进行测试您的代码在所有相关平台（特别是较低的马力平台）上，以查看您的滚动处理程序是否足够响应。

你可以看到这篇文章：More efficient way to handle $(window).scroll functions in jquery?有几种推迟滚动处理的方法，直到用户暂停，包括一个让它自动化的jQuery插件。

在jQuery .scroll（）事件处理程序中使用if-else是否可以？

2 个答案: