Arrays 按顺序运行循环数组

我正在尝试用按钮控件运行卫星图像动画。我有一系列日期卫星图像动画

  ["20200922", "20200923", "20200924", "20200925", "20200926", "20200927", "20200928"]

我下面的代码工作正常。但是当我运行代码时，我有随机的输出数组，没有按顺序运行

代码：

 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;
          }
        }
      }

saturation:number=1000
时段：任何[]；
imgs：任何[]
_指数：数字=0；
指数：数字=0；
日期$：可观察

有没有办法使输出循环有序

脚本随机化索引，签出

startAnimation（）{
this.timeoutsubscription=setInterval（（）=>{
console.log（this.index）
if（this.isBackward）{
本索引--；
如果（此索引此索引）{
该指数=0；
}
}
this.image$.next（this.imgs[this.index]）
this.date$.next（this.datearray[this.index]）
}，这是饱和度）；
}

希望这能解决您的问题。
请添加导致问题的代码（间隔）。您发布的代码将按顺序创建一个数组。请提供一个我更新我的代码以上@mplungjan@trincot我已更新请添加您的间隔函数。最好是创建一个stackblitz项目，这样我们就可以执行您的代码并重现您的问题。您可以在此处的链接中添加代码
    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);
  }