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

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

这是我的方法：

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

通过这个，我完成了我的http请求

$scope.newincidents = [];
$scope.NextIncidents = function() {
    var urlnext = $scope.nextincidents;

    if (!urlnext) {
        $("#infinite").prop("disabled", true);
    } else {
        $("#infinite").prop("disabled", false);
    }

    var mycookie = $cookieStore.get('Token');
    $http({
        method: 'GET',
        url: urlnext,
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-Token': '\UsernameToken Token="' + mycookie + '"',
        },
    }).success(function(data, status) {
        $scope.newincidents = data._embedded.incidents;
        var nextLink = data._links.next;
        $scope.nextincidents = nextLink ? nextLink.href : null;

        for (var n in $scope.incidents) {
            var month = new Date($scope.newincidents[n].upload_date).getMonth();
            $scope.incidents.push($scope.newincidents[n]);
            $scope.loadIncidents();

        };

    }).error(function(data, status, headers, config) {
        return false;
    });
    $scope.loadIncidents();
};

---

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

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

Ben Alman为此编写了一个非常流行的插件，但许多主要的JavaScript库还包括去盎司和节流的方法（下划线、lodash、angular等）

下面是它的工作原理：

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

此外，您可能会在稍后偶然发现另一个gotcha。。。谈到DOM，“无限”的概念实际上并不存在。您将达到可能使浏览器崩溃的极限。解决此问题的典型方法称为“虚拟渲染”，在这种方法中，在将新项目添加到底部时，您还可以从集合的开头删除项目（反之亦然）

---

为了向用户呈现他们仍在“滚动”的假象，您通常将外部容器的高度设置为一次呈现全部内容时的实际高度。这种方法意味着集合中的每个元素都有某种已知/可计算的高度。

最后一件事。。。我现在明白了，你实际上是在使用角度。您真的不应该在控制器中发出$http请求。相反，将其移动到服务并缓存结果，这样您就不需要再次发出相同的请求。理想情况下，您可以在服务中只请求一次所有结果，然后只允许控制器对其进行分页。我希望这能有所帮助。谢谢你的建议，事实上，我以前尝试过将一个服务作为我的$http请求，但我是AngularJs的新手，我不太理解服务的概念，我对每个功能都有很多$http GET。我会再试一次不客气。完全理解很多概念需要一些时间，但一旦你做到了，好处就会变得非常清楚。