在 jquery 中处理 $(window).scroll 函数的更有效方法? [英] More efficient way to handle $(window).scroll functions in jquery?

问题描述

在下面的代码中，我正在检查窗口是否正在滚动超过某个点，如果是，则将元素更改为使用固定位置，以便它不会滚动到页面顶部.唯一的问题是这似乎是高度的客户端内存密集型(并且确实降低了滚动速度)，因为在每个滚动像素上，我都在元素上一遍又一遍地更新样式属性.

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.

在尝试更新它之前检查 attr 是否已经存在会产生重大影响吗?有没有完全不同的更有效的做法来获得相同的结果?

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?

$(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");
    }
});

在我输入此内容时，我注意到 StackOverflow.com 使用相同类型的功能，在此页面的右侧有黄色的类似问题"和帮助"菜单.我想知道他们是怎么做到的.

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.

推荐答案

你可以使用的一种技术是在滚动事件上设置一个计时器，并且只在滚动位置在短时间内没有改变时才做主要工作时间.我在具有相同问题的调整大小事件上使用该技术.您可以试验什么超时值似乎工作正常.较短的时间以较短的滚动暂停更新，因此在滚动期间可能会更频繁地运行，较长的时间需要用户实际暂停所有运动一段有意义的时间.您将不得不尝试哪种超时值最适合您的目的，最好在相对较慢的计算机上进行测试，因为这是滚动延迟问题最明显的地方.

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");
    }
}

您还可以通过在滚动第一次开始时缓存一些选择器来加快滚动功能，这样就不必每次都重新计算它们.这是一个每次创建 jQuery 对象的额外开销可能对您无济于事的地方.

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:

(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);

工作演示: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");
    }
});

这篇关于在 jquery 中处理 $(window).scroll 函数的更有效方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！