Question

我是Angular世界的新手，我使用ngInfiniteScroll在每次滚动后加载更多数据。我实施了它并且它工作得很好。目前它立即响应，但我希望每个滚动加载图像延迟（1秒），我做谷歌但没有得到任何解决方案。

有人能指出我，如何解决这个问题？

这里是我的控制器代码

var app = angular.module('myapp', ['infinite-scroll']);
app.factory('Colony', function($http) {
  var Colony = function() {
    this.items = [];
    this.busy = false;
    this.index = 2;
    this.stopscript = false;
  };
  var userId = 14;
  Colony.prototype.nextPage = function() {
    if (this.busy) {
      return;
    } else {
      this.busy = true;
      var url = '/get_colony_articles?after=' + this.index + '&userId=' + userId + '';
      $http.post(url).success(function(data) {
        if(data.length>0){
            var bookmark_arr=[];
           var obj=[];
        for (var i = 0; i < data[0].category_name.length; i++) {
          for (var j = 0; j < data[0].bookmarks.length; j++) {
            if (data[0].category_name[i] == data[0].bookmarks[j].category_name) {
              if (data && data.error === 'no more Categories!') {
                this.stopscript = true;
              } else {
                bookmark_arr.push(data[0].bookmarks[j]);
              }
            }
          }
               obj={category_name:data[0].category_name[i],bookmarks:bookmark_arr};
              bookmark_arr=[];
            this.items.push(this.items,obj);
        }
        this.index = this.index + 2;
        this.busy = false;
      }
      }.bind(this));
    }
  };
  return Colony;
});

这是我的HTML代码

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script src="js/angular/lib/angular.min.js"></script>
    <script src="js/angular/lib/ng-infinite-scroll.min.js"></script>
    <script src="js/angular/customjs/dashboard.js"></script>
    <link rel="stylesheet" type="text/css" href="css/dashboard.css">
  </head>
  <body ng-app="myapp">
  <!--  <div><img src="images/loadingimage.gif" class="loadImg"></div> -->
      <div class="recent" ng-controller='recentCtrl'>
        <div class="recentname"><h2>Recent Articles</h2></div>
        <div ng-repeat='items in data.bookmarks'>
          <div class="root">
            <div class='title'>{{items.bookmark_title}}</div>
            <div class='image'><img ng-src="https://s3.amazonaws.com/biblio-hive/BookmarkPreviewImages/{{items.bookmark_preview_image}}"></div>
          </div>

        </div>
          <button type="submit" ng-click="loadMore(8)"> Load More</button>
      </div>

  <div ng-controller='colonyCtrl'>
    <div id="scroll" infinite-scroll='scroller.nextPage();'
      infinite-scroll-container="'scroll'"
      infinite-scroll-disabled='scroller.stopscript'
      infinite-scroll-distance='2'>

      <div ng-repeat='item in scroller.items track by $index' class="test">
        <div class="catname"><h2>{{item.category_name}}</h2></div>
        <div ng-repeat='item in scroller.items[$index].bookmarks' class="test">
          <div class="root">
            <div class='title'>{{item.bookmark_title}}</div>
            <div class='image'><img ng-src="https://s3.amazonaws.com/biblio-hive/BookmarkPreviewImages/{{item.bookmark_preview_image}}"></div>
          </div>
        </div>
      </div>

    </div>

  </div>

抱歉，我没有公开网址来举例说明JsFiddle或Plunker。

Answer 1

您可以这样覆盖它：

myapp.value('THROTTLE_MILLISECONDS', 1000);

将其放在app.js文件中。它会将THROTTLE_MILLISECONDS的默认值更改为1000，即1秒。这样，您的功能将在1秒后调用，而不是立即调用。

Answer 2

将请求延迟1秒你可以使用$timeout i angularjs，如下所示。 $timeout的内部函数将在1秒（1000毫秒）后触发。

else {
  this.busy = true;
  $timeout(function() {
     var url = '/get_colony_articles?after=' + this.index + '&userId=' + userId + '';
     $http.post(url).success(function(data) {....
     .....
   }, 1000); //delay 1 second        
};

延迟进入ngInfiniteScroll $ http服务

2 个答案: