Ngx-infinite-scroll: scrollDown called many times (expected only 1)

[elvisbegovic]

Hi, first thx to adapt infinite-scroll to angular2, my problem is when I scroll down, the onScrollDown() function is called more than one time, I want to call it only once see my code, is something strange?:

export class App implements OnInit{
  _contactsTotal:any; // get 500 data from server
  _contactsToRepeatInView:any;
  _waitData: boolean; //no ajax call if we are already waiting one

  constructor(private _contactService: ContactService) {}

  ngOnInit():any {
    this._contactsToRepeatInView = []
    this._waitData = false;

    this._contactService.getImages().map(res => res.json()).subscribe(data => {
      this._contactsTotal = data;
      this._contactsToRepeatInView = this._contactsTotal.splice(0,100); // show only 100 data from server response
    });
  }

  onScrollDown () {

    this._contactsToRepeatInView = this._contactsToRepeatInView.concat(this._contactsTotal.splice(0,100)) // when scrollDown concat() 100 additional data to actual view, from this._contactsTotal



    if(this._contactsTotal.length === 0){ //when this._contactsTotal equal 0 we do another ajax call and so the same stuff
      this._waitData = true; //this is problem
      if(this._waitData === true){ //this is problem
        this._contactService.getImages().map(res => res.json()).subscribe(data => {
          this._waitData == false; //this is problem
          this._contactsTotal = data
          this._contactsToRepeatInView = this._contactsToRepeatInView.concat(this._contactsTotal.splice(0,100))

        });
      }
    }
  }
}

[orizens]

hi @istiti
the purpose of this directive is to invoke the handler every time it scrolls after the specified "distance".
other specific logics should be resolved inside the component that's using it.

[elvisbegovic]

Could you please check my code I tried to implement something into component, with this._waitData properties but event with this solution I have more than one http call, I do not understand

[zoehneto]

That's because you always set _waitData to true before checking it.

[elvisbegovic]

do you have better implementation ? even pseudo-code :) what is the best way to implement this in onScrollDown() method

[zoehneto]

Based on your example this should work:

export class App implements OnInit{
  _contactsTotal:any; // get 500 data from server
  _contactsToRepeatInView:any;
  _waitData: boolean; //no ajax call if we are already waiting one

  constructor(private _contactService: ContactService) {}

  ngOnInit():any {
    this._contactsToRepeatInView = []
    this._waitData = false;

    this._contactService.getImages().map(res => res.json()).subscribe(data => {
      this._contactsTotal = data;
      this._contactsToRepeatInView = this._contactsTotal.splice(0,100); // show only 100 data from server response
    });
  }

  onScrollDown () {
    this._contactsToRepeatInView = this._contactsToRepeatInView.concat(this._contactsTotal.splice(0,100)) // when scrollDown concat() 100 additional data to actual view, from this._contactsTotal

    if(this._contactsTotal.length === 0){ //when this._contactsTotal equal 0 we do another ajax call and so the same stuff
      if(this._waitData === false){
        this._waitData = true;
        this._contactService.getImages().map(res => res.json()).subscribe(data => {
          this._contactsTotal = data
          this._contactsToRepeatInView = this._contactsToRepeatInView.concat(this._contactsTotal.splice(0,100))
          this._waitData = false;
        });
      }
    }
  }
}