Run loop array in order - arrays

Question

I am trying to run satellite image animation with buttons controls .l have array of dates satellite image animation.
["20200922", "20200923", "20200924", "20200925", "20200926", "20200927", "20200928"]
My code below is working fine . But when i run the code i have random output array , is not running as orderly
Code :
saturation: number = 1000
timeStops: any[];
imgs:any[]
_index :number = 0;
index: number = 0;
date$: Observable<any>;
image$: Observable<any>;
datepush: any[][];
datearray:any[]
play() {
const now = moment()
this.timeStops = [];
this.datearray = [];
for (let i = 0; i < 11; i++) {
now.subtract(15, 'minutes')
this.timeStops.push(this.roundTimeQuarterHour(now).utc().format('YYYYMMDD'));
this.imgs= [
new Image().src = "" + this.timeStops[10] + "T000000/time/00/image",
new Image().src = "" + this.timeStops[9] + "T000000/time/24/image",
new Image().src = "" + this.timeStops[8] + "T000000/time/48/image",
new Image().src = "" + this.timeStops[7] + "T000000/time/72/image",
new Image().src = "" + this.timeStops[6] + "T000000/time/96/image",
new Image().src = "" + this.timeStops[5] + "T000000/time/120/image",
new Image().src = "" + this.timeStops[4] + "T000000/time/144/image",
new Image().src = "" + this.timeStops[3] + "T000000/time/168/image",
new Image().src = "" + this.timeStops[2] + "T000000/time/192/image",
new Image().src = "" + this.timeStops[1] + "T000000/time/216/image",
new Image().src = "" + this.timeStops[0] + "T000000/time/240/image",
];
}
this.imgs.sort()
this.datearray.sort()
console.log(this.imgs)
var fortnightStart = moment();
for (let i = 1; i <= 7; i++) {
// 1, not i
this.datearray.push(fortnightStart.add(1, "days").format("YYYYMMDD"));
}
console.log(this.datearray);
console.log(this.index)
if (Math.abs(this._index) < this.imgs.length &&Math.abs(this._index) < this.datearray.length) {
this._index = this.imgs.length;
this._index = this.datearray.length;
}
this.image$ = interval(this.saturation).pipe(
map(() => {
return this.imgs[this.calculateIndex()];
}),
startWith(this.imgs[10])
);
this.date$ = interval(this.saturation).pipe(
map(() => {
return this.datearray[this.calculateIndex()];
}),
startWith(this.datearray[0])
);
}
calculateIndex(): number {
if (Math.abs(this._index) >= this.imgs.length * 3 &&Math.abs(this._index) >= this.datearray.length * 3) {
this._index = this._index % this.imgs.length;
this._index = this._index % this.datearray.length;
}
if (this.stoploop) {
this.index = this._index % this.imgs.length
this.index = this._index % this.datearray.length
return this.index;
} else {
if (this.isBackward) {
this.index = Math.abs(--this._index % this.imgs.length);
this.index = Math.abs(--this._index % this.datearray.length);
return this.index;
} else {
this.index = (++this._index % this.imgs.length);
this.index = (++this._index % this.datearray.length);
return this.index;
}
}
}
the output :
There is any way i can make the output loop as orderly ?
Live code

Answer 1

Your script randomizing the index, checkout I've modified your code.
startAnimation(){
this.timeOutSubsription = setInterval(()=>{
console.log(this.index)
if(this.isBackward){
this.index--;
if(this.index<0){
this.index = this._index;
}
} else{
this.index++;
if(this.index>this._index){
this.index = 0;
}
}
this.image$.next(this.imgs[this.index])
this.date$.next(this.datearray[this.index])
}, this.saturation);
}
Hope this solves your issue.