javascript - 如何选择视口(viewport)上的最后一个元素

Question

我正在寻找一种有效的方法来不断地选择可见窗口/视口(viewport)中的最后一个元素。

到目前为止，这是我的代码:

$(window).scroll(function () { 

$('.post-content p').removeClass("temp last")
$('.post-content p').filter(":onScreen").addClass("temp")

$(".temp").eq(-1).addClass("last")

    });

正如您可能想象的那样，这会占用大量资源并且性能不佳。有人可以从更优雅的代码中提出建议吗？

我的 Javascript 知识很基础，所以请耐心等待。谢谢。

PS:我正在为 :onScreen 选择器使用 onScreen 插件:http://benpickles.github.com/onScreen/

Answer 1

绑定(bind)滚动处理程序

将函数绑定(bind)到滚动事件 can lead to serious performance problems .滚动事件在页面滚动时会非常活跃地触发，因此将具有资源密集型代码的函数绑定(bind)到它是一个坏主意。

John 建议设置时间间隔，从而让代码仅在滚动事件发生后的某个时间执行。

Have a look at this jsfiddle to see difference between the implementations

间接处理程序解决方案的代价是滚动和执行代码之间存在明显的滞后，如果您可以牺牲性能来换取更快速的执行，则由您决定。请务必在您支持的每个浏览器上测试性能。

加速代码执行

您可以使用许多不同的概念来加速您的代码。关于您的代码，归结为:

• > Caching selectors .每次触发滚动处理程序时都重新选择元素，这是不必要的
• 不要在不知道 jQuery 插件的作用的情况下使用它们。在你的情况下，the plugin code很好而且非常简单，但为了您的目标，您甚至可以使用更快捷的代码。
• 防止任何不必要的计算。使用您和插件的代码，每次触发滚动处理程序时都会计算每个元素的偏移量。

所以我想出的是 a Jsfiddle with an example how you could do you scroll handler 。它与您的 DOM 不完全匹配，因为我不知道您的 html，但应该很容易将它与您的实现匹配。

与 your code 相比，我设法将使用时间减少了 95% .您可以通过在 chrome 中分析这两个示例来亲眼看看。

我假设您只想选择最后一个元素，不需要临时类

所以，这是带有解释的代码

// Store the offsets in an array
var offsets = [];
// Cache the elements to select
var elements = $('.elem');
// Cache the window jQuery Object
var jWindow = $(window);
// Cache the calculation of the window height
var jWindowHeight = jWindow.height();
// set up the variable for the current selected offset
var currentOffset;
// set up the variable for the current scrollOffset
var scrollOffset;
// set up the variable for scrolled, set it to true to be able to assign at
// the beginning
var scrolled = true;

// function to assign the different elements offsets,
// they don't change on scroll
var assignOffsets = function() {
    elements.each(function() {
        offsets.push({
            offsetTop: $(this).offset().top,
            height: $(this).height(),
            element: $(this)
        });
    });
};

// execute the function once. Exectue it again if you added
// or removed elements
assignOffsets();

// function to assign a class to the last element
var assignLast = function() {
    // only execute it if the user scrolled
    if (scrolled) {
        // assigning false to scrolled to prevent execution until the user
        // scrolled again
        scrolled = false;

        // assign the scrolloffset
        scrollOffset = jWindowHeight + jWindow.scrollTop();

        // only execute the function if no current offset is set,
        // or the user scrolled down or up enough for another element to be
        // the last
        if (!currentOffset || currentOffset.offsetTop < scrollOffset || currentOffset.offsetTop + currentOffset.height > scrollOffset) {

            // Iterate starting from the bottom
            // change this to positive iteration if the elements count below 
            // the fold is higher than above the fold
            for (var i = offsets.length - 1; i >= 0; i--) {

                // if the element is above the fold, reassign the current
                // element
                if (offsets[i].offsetTop + offsets[i].height < (scrollOffset)) {
                    currentOffset && (currentOffset.element.removeClass('last'));
                    currentOffset = offsets[i];
                    currentOffset.element.addClass('last');
                    // no further iteration needed and we can break;
                    break;
                }
            }
            return true;
        } else {
            return false;
        }
    }
}

assignLast();

// reassign the window height on resize;
jWindow.on('resize', function() {
    jWindowHeight = jWindow.height();
});

// scroll handler only doing assignment of scrolled variable to true
jWindow.scroll(function() {
    scrolled = true;
});

// set the interval for the handler
setInterval(assignLast, 250);

// assigning the classes for the first time
assignLast();