當用戶滾動到頁面底部附近時調用函數

Question

我有一個對象數組，但我不需要全部查看，我想創建一個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();
};

當用戶位於底部時，我該怎么做才能只調用一個函數。 現在該函數可以使用，但是重復對象

Answer 1

直接綁定到諸如window.scroll或window.resize之類的事件絕不是一個好主意，因為每個瀏覽器都會以不同的方式觸發這些事件。 相反，您應該使用反跳/節流方法，這將確保不會不必要地調用事件處理程序。

Ben Alman為此編寫了一個非常流行的插件，但是許多主要的JavaScript庫也包含用於反跳和限制的方法（下划線，lodash，angular等）。

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

運作方式如下：

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

此外，稍后您可能會發現另一個陷阱……當涉及到DOM時，“無限”的概念確實不存在。 您將達到瀏覽器崩潰的極限。 解決此問題的典型方法稱為“虛擬渲染”，在這種方法中，當您向底部添加新項目時，也會從集合的開頭刪除項目（反之亦然）。

為了向用戶展示他們仍在“滾動”的錯覺，通常將外部容器的高度設置為內容一次全部呈現時的實際高度。 這種方法意味着集合中的每個元素都有某種已知的/可計算的高度。