Question

我是角色的新手，曾经和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);
                }

            })
        }
    }
})

向我的控制人致辞：

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");
            })
        }   
    }
}]);

我的悲惨想法是用我的“等待布尔”来阻止这个功能，但是不能立刻把我从许多请求中解救出来。

我尝试使用ng-disabled做了不同的事情，但到目前为止我没有任何作用

Answer 1

您可以获得$http所发送的承诺的帮助，该承诺来自addMore＆amp;然后检查确实已经处理过的请求。如果没有，那么再打一次电话。这种方式代码将确保除非一个调用完成，否则其他调用不会发生。

<强>控制器

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
      });
    }
  }
}]);

自定义无限滚动触发多次

1 个答案: