自定义无限滚动多次触发

Question

我是 angular 的新手，曾与 jquery 一起工作。

我设置了一个指令，当用户几乎位于文档底部时，它会侦听滚动以触发 http.get 请求。一切正常，但我无法避免事件一次触发很多时间。

这里有一些代码，如果你有一些很棒的建议！

html :

div(class="home-flex", ng-scroll, infinite-request="addMore()", ng-disabled)
    div(class="home-article", ng-repeat="article in articles", ng-cloak)
        img(class="home-article-image", ng-src="{{ article.imageUrl }}", ng-cloak)

指令：

nemi.directive('ngScroll', function($window, $document){
    return {
        link: function(scope, element, attrs){
            $document.on('scroll', function(element){
                var height = Math.max(
                    document.body.scrollHeight, document.documentElement.scrollHeight,
                    document.body.offsetHeight, document.documentElement.offsetHeight,
                    document.body.clientHeight, document.documentElement.clientHeight
                );
                // console.log("window height : " + $window.innerHeight)
                // console.log("scroll from top : " + $window.pageYOffset);
                // console.log("scroll from top + window height : " + ($window.innerHeight + $window.pageYOffset))
                // console.log("doc height : " + height);
                // console.log("scroll/doc : " +  $window.pageYOffset/height);

                if ((($window.pageYOffset + $window.innerHeight)/height) > 0.6) {
                    console.log("trigger");
                    scope.$apply(attrs.infiniteRequest);
                }

            })
        }
    }
})

annnnd 我的控制器：

nemi.controller('homeController', [ '$scope', '$http', '$window', function($scope, $http){
    $http.get('/articles').success(function(res){
        $scope.articles = res;
    }).error(function(data){
        console.log(data);
    });

    var wait = true;
    $scope.addMore = function() {
        if (wait === true) {
            wait = false;
            console.log("trigger");
            $http.get('/articles').success(function(res) {
                res.forEach(function(elem){
                    $scope.articles.push(elem);

                })
            wait = true;
            }).error(function(){
                console.log("scroll failed");
            })
        }   
    }
}]);

我用 "wait boolean" 阻止该功能的悲惨尝试有效，但并没有让我立即摆脱许多请求。

我用 ng-disabled 尝试了不同的方法，但到目前为止没有任何效果

Answer 1

您可以从 $http 返回的承诺中获得帮助，这是从 addMore 发生的，然后检查请求是否已经在处理中。如果否，则再次拨打电话。这样代码将确保除非一个调用完成，否则不会发生其他调用。

控制器

nemi.controller('homeController', ['$scope', '$http', '$window', function($scope, $http, $window) {
  $http.get('/articles').success(function(res) {
    $scope.articles = res;
  }).error(function(data) {
    console.log(data);
  });

  var addMorePromise = null;
  $scope.addMore = function() {
    console.log("trigger");
    if (!addMorePromise) { //if no request is in progress then do it again
      addMorePromise = $http.get('/articles').then(function(response) {
        var data = response.data;
        data.forEach(function(elem) {
          $scope.articles.push(elem);
        });
      }).finally(function() {
        addMorePromise = null; //after request complete, make promise object to null
      });
    }
  }
}]);

自定义无限滚动多次触发

Custom infinite scrolling trigger many times

angularjs

angularjs-directive

angularjs-scope

angularjs-http