call a function when user scrolls near bottom of page

Question

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.

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

$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

Answer 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.

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).

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).

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.