Question

我有一个对象数组，但我不需要看全部，我想创建一个InfiniteScroll并为每8个项目发出请求，我的问题是JQuery，该方法调用函数8次，导致重复相同的元素。

这是我的方法：

ShellFolderView

并且我做了我的http请求

$(function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() > $(document).height() - $(window).height() - a_little_bit_before) {
            $scope.NextIncidents();
        }
    });
});

如何在用户位于底部时仅调用一个函数。现在该功能可以工作但是，重复对象

Answer 1

直接绑定到window.scroll或window.resize之类的事件永远不是一个好主意，因为每个浏览器都会以不同的方式触发这些事件。相反，您应该使用去抖/节流方法，这将保证不会不必要地调用您的事件处理程序。

Ben Alman为此编写了一个非常受欢迎的插件，但许多主要的JavaScript库还包括去抖动和节流的方法（下划线，lodash，角度等）。

http://benalman.com/projects/jquery-throttle-debounce-plugin/

以下是它的工作原理：

$(window).on('scroll', $.throttle(300, function(){
    // handle the event here
}));

此外，你可能会偶然发现另一个问题...＆＃34;无限＆＃34;在DOM方面确实不存在。您将达到可能导致浏览器崩溃的限制。解决此问题的典型方法称为＆＃34;虚拟渲染＆＃34;，当你向底部添加新的项目时，你也可以从集合的开头删除项目（或者亦然）。

为了向用户呈现他们仍然“滚动”的幻觉，您通常会将外部容器的高度设置为您的内容实际上的高度。它们都是立刻渲染出来的。这种方法意味着集合中的每个元素都具有某种已知/可计算的高度。

当用户在页面底部滚动时调用函数

1 个答案: