2

我有以下使用ngInfiniteScroll的无序列表：

<ul class="list-group" infinite-scroll="loadMore()">

<li ng-repeat="post in posts | filter:search" class="list-group-item isteacher-{{post.isteacher}}"><a href="/post/{{post.postid}}"><h4>{{post.title}}</h4></a> by <a href="/author/{{post.authorid}}">{{post.author}}</a> on <small>{{post.date}}</small></li>
</br>

</ul>

我的loadMore()函数使用偏移量查询数据库。偏移量是迄今为止加载的项目数。我已经手动测试过了，它工作正常。

    $scope.offset = 0;
    $scope.posts = [];
    $scope.loadMore = function(){
        $http.get('/getposts?offset='+$scope.offset)
            .success(function(data){
                var newList = data.post_list;
                if(newList.length>0){
                    for(var x=0; x<newList.length; x++){
                        $scope.posts.push(newList[x]);
                    }
                    $scope.offset+=newList.length;
                }
            });
    }

每次查询时，数据库的获取限制为“10”，并接受偏移量。我有一个包含 11 个帖子的数据集，只是为了测试。如果它有效，它应该在页面加载时加载前 10 个，在我滚动时加载第 11 个。虽然这在某些时候有效，但在大多数情况下都会中断。我所说的破坏的意思是它会加载最后一个帖子 3-4 次。$scope.posts.length每次调用该函数时，我都通过记录来测试它。页面加载时，长度为 10，但当我向下滚动时，它会多次添加最后一个元素。任何帮助都会很棒！

4

1 回答 1

8

问题是，您启动 http get 请求并等待响应。与此同时，您正在向上滚动并完成，您的函数将再次被调用。这可能是最后一篇文章被多次加载的原因。但是，如果查询成功，则将 newList.length 添加到偏移量中。此问题的可能解决方案：

$scope.offset = 0;
$scope.posts = [];
$scope.isBusy = false;
$scope.loadMore = function(){
    if($scope.isBusy === true) return; // request in progress, return
    $scope.isBusy = true;
    $http.get('/getposts?offset='+$scope.offset)
        .success(function(data){
            var newList = data.post_list;
            if(newList.length>0){
                for(var x=0; x<newList.length; x++){
                    $scope.posts.push(newList[x]);
                }
                $scope.offset+=newList.length;
            }
            $scope.isBusy = false; // request processed
        });
}
于 2014-04-22T02:30:10.573 回答