Ionic-framework: infiniteScroll triggers multiple times

[iBasit]

Short description of the problem:

http://ionicframework.com/docs/v2/2.0.0-beta.2/api/components/infinite-scroll/InfiniteScroll/

InfiniteScroll should triggers multiple times, while loading previous one.

So If I got scroll down, it will make call multiple times, which then makes multiple ajax calls continuously.

What behavior are you expecting?

infiniteScroll should trigger once, after infiniteScroll.completed() then it should be allowed to trigger again, until then it should not call anymore triggers to the method.

Ionic Version: beta 2.x

Browser & Operating System: iOS / Android / Chrome

[adamdbradley]

So are you saying that while one ajax request happens, others can also get fired off? Would you be able to create a code example of the issue you're having?

[iBasit]

Problem

<ion-infinite-scroll (infinite)="doInfinite($event)">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
 </ion-infinite-scroll>

 doInfinite(infiniteScroll) {
    console.log('check console log has I get trigger');
}

doInfinite($event) will get trigger multiple times at once.

Expected

doInfinite($event) should trigger once until infiniteScroll.complete() is called, then it should be allowed to trigger again.

[AbuHani]

the same problem, any updates ?

[adamdbradley]

I'm having troubles trying to replicate this, however, I did add some extra checks to ensure the event isn't firing when it's already loading: https://github.com/driftyco/ionic/commit/f7b1f373d3ae347d12dfd770e84c6135accab454

Is this happening on the device or browser? Android or iOS?

@jgw96 Would you be able to try to replicate this issue? Thanks

[jgw96]

Hello all, so after trying to reproduce this i do not see this issue on any of my devices or in chrome. @iBasit if you could create a plunker that demonstrates this issue that would be awesome!

[mahcr]

@iBasit Hey, I tried to reproduce the issues as well but It seems to be working fine.

Tested on:

• Ionic Version: V2 beta .6
• Browser & Operating System: Iphone 5 - iOS - 9.0.2 / Nexus 5 - Android - 6.0.1 / Chrome

[jgw96]

Hello all! As it seems that this issue is not reproducible anymore i will be closing this issue for now, but if anyone still runs into this issue then feel free to comment and i will happily reopen. Thanks for using Ionic!

[Kevin-Chinem]

Almost one year late, but i had the same problem (multiple triggers) with infinite scroll in ionic-angular v2.3.
the html code was:

<ion-content class="cards-bg">
    <ion-list>
      <ion-card *ngFor="let n of news">
        <img *ngIf="n.show" [src]="n.img" (click)="callContent(n)" />
        <ion-card-content>
          <ion-card-title>
            {{n.title}}
          </ion-card-title>
          <p>
            {{n.message}}
          </p>
        </ion-card-content>
      </ion-card>
  </ion-list>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

The problem was a missing <ion-item> tag. just changed to:

<ion-content class="cards-bg">
  <ion-list>
    <ion-item *ngFor="let n of news">
      <ion-card>
        <img *ngIf="n.show" [src]="n.img" (click)="callContent(n)" />
        <ion-card-content>
          <ion-card-title>
            {{n.title}}
          </ion-card-title>
          <p>
            {{n.message}}
          </p>
        </ion-card-content>
      </ion-card>
    </ion-item>
  </ion-list>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

[NuclearMachine]

this damn bug is still here.

[rajitgola]

This bug still persists....any solution?

[AmitDigga]

  isLoadingMore = false;
  doInfinite(infiniteScroll: InfiniteScroll) {
    if (this.isLoadingMore)
      return;
    this.isLoadingMore = true;
    setTimeout(()=>
    dataFetching$.subscribe(_ => { infiniteScroll.complete(); this.isLoadingMore = false; })
    }, 0);
  }

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.