Infinite loop/DDos when reaching end of container

[tot-ra]

Hey. We've got a bug with infinite scroll going into infinite loop, and because we're using ajax it results in overloading/DDosing our server. It happens only if you reach the end of the scroll

We're using version 1.2 with container that is absolutely positioned and takes part of the screen

<div id="advert_version_list">
    <div infinite-scroll-container="'#advert_version_list'"
         infinite-scroll="advertVersionPaginator.next()"
         infinite-scroll-disabled='advertVersionPaginator.busy'>
        <div ng-repeat="advertVersion in advertVersionPaginator.items">...</div>
    </div>
</div>

As I said, the data is loaded through service over ajax (and then cached in _storage) with custom offset params. And basically when you reach the end of the container, only empty array is returned so no divs are added

            getPaginator: function (advert_id) {
                var PageLoader = function () {
                    this.items = _storage;
                    this.busy = false;
                };

                var self = this;

                PageLoader.prototype.next = function () {
                    if (this.busy) return;
                    this.busy = true;

                    var offset = _.where(_storage, {'advert_id': 1 * advert_id}).length;

                    self.getVersionsOffsetByAdvertId(advert_id, offset).then(function (data) {
                        this.busy = false;
                        return data;
                    }.bind(this));
                };

                return new PageLoader();
            },

I think this is primarily caused by ng-infinite-scroll.js:67
shouldScroll = remaining <= height(container) * scrollDistance + 1;

If i replace it with
shouldScroll = remaining < 0 && remaining <= height(container) * scrollDistance + 1;
then it works fine

[yanivkalfa]

yap i am have a similar issue. and the above solution should be working. can we please merge it ?

[SgtHotshot]

Yeah I have found this exact issue when there is no initial data being loaded.

[sroze]

Thank you for reporting this issue, I'll have a look ASAP.
On Tue, 19 Jan 2016 at 22:48, Ben Ebert [email protected] wrote:

Yeah I have found this exact issue when there is no initial data being
loaded.

—
Reply to this email directly or view it on GitHub
#186 (comment)
.

[justcald]

How did that look go? I've been spending the past 24 hours on this exact issue.. but still no luck. I can't stop the infinite loading.

[nik-john]

Anyone have any work arounds for this?

[lhardie]

I believe I was having this issue. When my remote returned a small number of results, when a user scrolled down and hit the bottom of the container, infinite scroll would begin an endless loop of calls to the backend for data, which was always returning an empty array.

In case anyone experiences this and still needs a work-around, you can use the "infinite-scroll-disabled" setting to ensure infinite scroll is disabled if remote has returned less than a certain number of docs.

For example, in somewhat pseudo-code, in your HTML:

<table infinite-scroll-container="'my-container-here'" infinite-scroll-immediate-check="false" infinite-scroll-disabled="vm.loading" infinite-scroll="getDocs()">

And in your javascript:

vm.loading = false;

function getDocs() {
  vm.loading = true;

  myService.getDocuments().then(function(data) {
    vm.documents = data;
    if(data.length >= 25) {
      vm.loading = false;
    }
  });
}

Now if we hit the bottom of our infinite scroll and there are no more results to show from remote, the last call to remote that had less than 25 items will have set vm.loading to true, meaning the intinite-scroll-disabled setting will also be true.