Ionic Infinite Scroll reloads old data over and over again


#1

Ionic Infinite Scroll reloads old data over and over again. Here’s my code:
Basically it works ok, it load the next batch of 8 pieces of content, and when I reach the end and Infinite scroll is invoked, it loads the next batch and also re-loads previous photos (in my case).
Any advice on why this is happening will be highly appreciated!

doInfinite(infiniteScroll) {           
    if (this.end === false && (this.counter === 3 || this.counter === 11) && this.startListingID != undefined) {
      setTimeout(() => {                                                                        
        firebase.database().ref('/explore/').orderByKey().startAt((this.startListingID).toString()).limitToFirst(9).once('value', (snapshot) => {
          snapshot.forEach(snap => {       
            if((this.counter <= (this.counter2 + 7)) && (this.intermediateListingID !== snap.val().listingID)) {
              let temp = {
                displayName: snap.val().displayName,
              }
              this.load = { photo0: false, photo1: (temp.photo1) ? false:true, photo2: (temp.photo2) ? false:true, photo3: (temp.photo3) ? false:true, photo4: (temp.photo4) ? false:true, photo5: (temp.photo5) ? false:true };
              this.object.push(temp);
              this.counter++;
              this.intermediateListingID = snap.val().listingID;
              return false;
            } else {
              if(this.startListingID !== snap.val().listingID) {
                this.counter = this.counter2;
                this.startListingID = snap.val().listingID;
              }
              else { this.end = true; }
            }
            setTimeout(() => {
              infiniteScroll.complete();
            }, 1000);
          });
          setTimeout(() => {
            infiniteScroll.complete();
          }, 1000);
        }).catch((error) => { console.log("infiniteScroll Error: " + JSON.stringify(error)); infiniteScroll.complete(); });
      }, 1000);
    } else {
      setTimeout(() => {
        infiniteScroll.complete();
      }, 1000);
    }
  }

#2

this.load = { photo0: false, photo1: (temp.photo1) ? false:true, photo2: (temp.photo2) ? false:true, photo3: (temp.photo3) ? false:true, photo4: (temp.photo4) ? false:true, photo5: (temp.photo5) ? false:true };

This got to be part of the array too!


#3

Why are there all these setTimeout()s all over the place? Very bad idea, that leads to inconsistent app behavior and difficult-to-reproduce bugs.


#4

because I need to account for download time for the content. But I agree, this is not ideal.