在 jquery 中处理 $(window).scroll 函数的更有效方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7392058/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
More efficient way to handle $(window).scroll functions in jquery?
提问by RichC
In the code below, I'm checking to see if the window is being scrolled past a certain point and if it is, change an element to use fixed position so that it doesn't scroll off the top of the page. The only problem is that is seems to be HIGHLY client-side-memory intensive (and really bogs down the scrolling speed) because at every single scroll pixel I am updating the style attributes over and over on the element.
在下面的代码中，我正在检查窗口是否正在滚动超过某个点，如果是，则将元素更改为使用固定位置，以便它不会从页面顶部滚动。唯一的问题是这似乎是高度的客户端内存密集型（并且确实降低了滚动速度），因为在每个滚动像素上，我都在元素上一遍又一遍地更新样式属性。
Would checking if the attr is already there before attempting to update it make a significant difference? Is there a completely different and more efficient practice to get the same result?
在尝试更新它之前检查 attr 是否已经存在会产生重大影响吗？是否有完全不同且更有效的做法来获得相同的结果？
$(window).scroll(function () {
var headerBottom = 165;
var fcHeight = $("#pnlMainNavContainer").height();
var ScrollTop = $(window).scrollTop();
if (ScrollTop > headerBottom) {
$("#HeaderContentBuffer").attr("style", "margin-top:" + (fcHeight) + "px;");
$("#AddFieldsContainer").attr("style", "position:fixed;width:320px;top:70px;left:41px;");
} else {
$("#HeaderContentBuffer").attr("style", "margin-top: 0px;");
$("#AddFieldsContainer").removeAttr("style");
}
});
As I'm typing this, I notice that StackOverflow.com using the same type of functionality with their yellow "Similar Questions" and "Help" menus on the right hand side of this page. I wonder how they do it.
当我输入这个时，我注意到 StackOverflow.com 使用了相同类型的功能，在这个页面的右侧有黄色的“类似问题”和“帮助”菜单。我想知道他们是怎么做到的。
回答by jfriend00
One technique you can use is to set a timer on the scroll event and only do the main work when the scroll position hasn't changed for a short period of time. I use that technique on resize events which have the same issue. You can experiment with what timeout value seems to work right. A shorter time updates with shorter pauses in scrolling and thus may run more often during the scroll, a longer time requires the user to actually pause all motion for a meaningful time. You will have to experiment with what timeout value works best for your purposes and it would be best to test on a relatively slow computer since that's where the issue of scroll lag would be most pronounced.
您可以使用的一种技术是在滚动事件上设置一个计时器，并且仅在滚动位置在短时间内没有改变时才执行主要工作。我在具有相同问题的调整大小事件上使用该技术。您可以尝试什么超时值似乎工作正常。较短的时间以较短的滚动暂停更新，因此在滚动期间可能会更频繁地运行，较长的时间需要用户实际暂停所有运动一段有意义的时间。您将不得不尝试哪种超时值最适合您的目的，最好在相对较慢的计算机上进行测试，因为这是滚动延迟问题最明显的地方。
Here's the general idea how this could be implemented:
这是如何实现的总体思路：
var scrollTimer = null;
$(window).scroll(function () {
if (scrollTimer) {
clearTimeout(scrollTimer); // clear any previous pending timer
}
scrollTimer = setTimeout(handleScroll, 500); // set new timer
});
function handleScroll() {
scrollTimer = null;
var headerBottom = 165;
var fcHeight = $("#pnlMainNavContainer").height();
var ScrollTop = $(window).scrollTop();
if (ScrollTop > headerBottom) {
$("#HeaderContentBuffer").attr("style", "margin-top:" + (fcHeight) + "px;");
$("#AddFieldsContainer").attr("style", "position:fixed;width:320px;top:70px;left:41px;");
} else {
$("#HeaderContentBuffer").attr("style", "margin-top: 0px;");
$("#AddFieldsContainer").removeAttr("style");
}
}
You may also be able to speed up your scroll function by caching some of the selectors when the scrolling first starts so they don't have to be recalculated each time. This is one place where the extra overhead of creating a jQuery object each time might not be helping you.
您还可以通过在滚动第一次开始时缓存一些选择器来加速滚动功能，这样就不必每次都重新计算它们。这是一个每次创建 jQuery 对象的额外开销可能对您没有帮助的地方。
Here's a jQuery add-on method that handles the scrolling timer for you:
这是一个为您处理滚动计时器的 jQuery 附加方法：
(function($) {
var uniqueCntr = 0;
$.fn.scrolled = function (waitTime, fn) {
if (typeof waitTime === "function") {
fn = waitTime;
waitTime = 500;
}
var tag = "scrollTimer" + uniqueCntr++;
this.scroll(function () {
var self = $(this);
var timer = self.data(tag);
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
self.removeData(tag);
fn.call(self[0]);
}, waitTime);
self.data(tag, timer);
});
}
})(jQuery);
Working demo: http://jsfiddle.net/jfriend00/KHeZY/
工作演示：http: //jsfiddle.net/jfriend00/KHeZY/
Your code would then be implemented like this:
然后您的代码将像这样实现：
$(window).scrolled(function() {
var headerBottom = 165;
var fcHeight = $("#pnlMainNavContainer").height();
var ScrollTop = $(window).scrollTop();
if (ScrollTop > headerBottom) {
$("#HeaderContentBuffer").attr("style", "margin-top:" + (fcHeight) + "px;");
$("#AddFieldsContainer").attr("style", "position:fixed;width:320px;top:70px;left:41px;");
} else {
$("#HeaderContentBuffer").attr("style", "margin-top: 0px;");
$("#AddFieldsContainer").removeAttr("style");
}
});
回答by Sam Heuck
I have found this method to be much more efficeint for $(window).scroll()
我发现这种方法更有效 $(window).scroll()
var userScrolled = false;
$(window).scroll(function() {
userScrolled = true;
});
setInterval(function() {
if (userScrolled) {
//Do stuff
userScrolled = false;
}
}, 50);
Check out John Resig's poston this topic.
查看John Resig关于此主题的帖子。
An even more performant solution would be to set a a longer interval that detects if you are
close to the bottom or top of the page. That way, you wouldn't even have to use $(window).scroll()
一个更高效的解决方案是设置更长的时间间隔，以检测您是靠近页面底部还是顶部。这样，您甚至不必使用$(window).scroll()
回答by mstoic
Making your function a little more efficient.
使您的功能更加高效。
Just check if the style attribute is present/absent before removing/adding the styles.
在删除/添加样式之前，只需检查样式属性是否存在/不存在。
$(window).scroll(function () {
var headerBottom = 165;
var fcHeight = $("#pnlMainNavContainer").height();
var ScrollTop = $(window).scrollTop();
if (ScrollTop > headerBottom) {
if (!$("#AddFieldsContainer").attr("style")) {
$("#HeaderContentBuffer").attr("style", "margin-top:" + (fcHeight) + "px;");
$("#AddFieldsContainer").attr("style", "position:fixed;width:320px;top:70px;left:41px;");
}
} else {
if ($("#AddFieldsContainer").attr("style")) {
$("#HeaderContentBuffer").attr("style", "margin-top: 0px;");
$("#AddFieldsContainer").removeAttr("style");
}
}
});
回答by Vitali Protosovitski
Set some logic here. You actually need to set atts once on up, and once on down. So:
在这里设置一些逻辑。您实际上需要设置 atts 一次向上，一次向下。所以：
var checker = true;
$(window).scroll(function () {
.......
if (ScrollTop > headerBottom && checker == true) {
$("#HeaderContentBuffer").attr("style", "margin-top:" + (fcHeight) + "px;");
$("#AddFieldsContainer").attr("style", "position:fixed;width:320px;top:70px;left:41px;");
checker == false;
} else if (ScrollTop < headerBottom && checker == false) {
$("#HeaderContentBuffer").attr("style", "margin-top: 0px;");
$("#AddFieldsContainer").removeAttr("style");
checker == true;
}
});
