0

我是 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>

抱歉，我没有公共 URL 可以在 JsFiddle 或 Plunker 上提供示例。

4

2 回答 2

2

您可以像这样覆盖它：

myapp.value('THROTTLE_MILLISECONDS', 1000);

把它放在你的 app.js 文件中。它会将THROTTLE_MILLISECONDS' 的默认值更改为10001 秒。这样，您的函数将在 1 秒后调用，而不是立即调用。

于 2014-12-11T10:41:37.623 回答
0

要将请求延迟 1 秒，您可以使用$timeouti 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        
};
于 2014-12-11T10:04:50.397 回答