Delay in in ngInfiniteScroll $http service

Question

I am new in Angular world, I am using ngInfiniteScroll to load more data after every scroll. I implemented in and it's working fine.Currently it respond instantly, But I want a delay(1 second) on every scroll with loading image, I did Google but didn't get any solution.

Can anybody point me, how to get this issue?

Here in my Controller code

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

And here is my HTML Code

<!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>

Sorry I don't have public URL to give example on JsFiddle or Plunker.

check `$timeout` in `angularjs` or `setTimeout()` in `javascipt` — Kalhan.Toress, Dec 11 '14 at 10:00

score 2 · Accepted Answer · answered Dec 11 '14 at 10:41

2

You can override it like this:

myapp.value('THROTTLE_MILLISECONDS', 1000);

Place this in your app.js file. It will change THROTTLE_MILLISECONDS's default value to 1000 i.e 1 second. This way your function will be called after 1 second instead of instantly.

answered Dec 11 '14 at 10:41

Aniket Sinha

5,716
6
34
49

1

Thanks, @Aniket it's looking awesome – abdulbarik Dec 11 '14 at 11:47
Just sharing experiences. Happy to help. – Aniket Sinha Dec 11 '14 at 12:30

score 0 · Answer 2 · answered Dec 11 '14 at 10:04

0

to delay a request by 1 sec u can use $timeout i angularjs as below. inside function of $timeout will trigger after 1 sec (1000ms).

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

answered Dec 11 '14 at 10:04

Kalhan.Toress

20,702
5
63
84

It didn't work, I think there is variable scope issue, getting `this.items` undefined – abdulbarik Dec 11 '14 at 10:19

Delay in in ngInfiniteScroll $http service

2 Answers2