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

I have an array of objects , but I do not need to see all , I want to create a InfiniteScroll and make requests for every 8 items, my problem with JQuery is, the method call the function like 8 times, causing repeat the same elements.

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

this is my method:

这是我的方法:

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

and with this I do my http request

并且我做了我的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();
};

How can I do to call the function only one at the time when the user are in the bottom. Now the function works but, repeat objects

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

1 个解决方案

#1

It's never a good idea to tie directly to an event like window.scroll or window.resize, because each browser triggers these differently. Instead, you should use a debounce/throttle approach, which will guarantee that your event handler is not called unnecessarily.

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

Ben Alman wrote a very popular plugin for this, but many major JavaScript libraries also include methods for debounce and throttle (underscore, lodash, angular, etc).

Ben Alman为此编写了一个非常流行的插件,但许多主要的JavaScript库还包括debounce和throttle的方法(下划线,lodash,angular等)。

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

Here's how it works:

以下是它的工作原理:

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

Additionally, you'll probably stumble upon another gotcha later on... the concept of "infinite" really doesn't exist when it comes to the DOM. You WILL hit a limit at which you'll probably crash the browser. The typical approach to solving this problem is called "virtual rendering", in which you also remove items from the beginning of the collection when you add new ones to the bottom (or vice-versa).

另外,你可能会偶然发现另一个问题......当谈到DOM时,“无限”的概念确实不存在。您将达到可能导致浏览器崩溃的限制。解决此问题的典型方法称为“虚拟渲染”,当您向底部添加新项目时,也可以从集合的开头删除项目(反之亦然)。

To present the illusion to the user that they're still "scrolling", you'd usually set the height of the outer container to be that of what your content would actually be if it were all rendered at once. This approach implies that each element in the collection has some sort of known / calculable height.

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

#1