How to make a for-loop wait some time before going through the loop again

Question

I want to display an array of slides and each slide has a value which tells the programm how long it should be displayed for. Since the slides are stored in an array I thought about just looping through the array, display the current slide and then just wait the amount of time at the end before looping again.

So this is my attempt:

for (let  i= 0; i < this.slides.length; i++) {
  setTimeout(() => {
    this.currentSlide = this.slides[i]
  }, this.slides[i].slidetime * 1000);
}

I even tried doing it like this:

for (let  i= 0; i < this.slides.length; i++) {
  this.currentSlide = this.slides[i];
  this.wait(this.slides[i].slidetime);
}

wait(seconds) {
  setTimeout(() => {}, seconds * 1000);
}

But it didn't make a difference.

setTimeout is *asynchronous*, it won't block the for loop. – jonrsharpe Nov 13 '19 at 07:59 — jonrsharpe, Nov 13 '19 at 07:59
@jonrsharpe Okay i see... so what would work? – niehoelzz Nov 13 '19 at 08:00 — niehoelzz, Nov 13 '19 at 08:00

Poul Kruijt · Accepted Answer · 2019-11-13T09:20:26.340

1

You used the tag angular so you can use Observables for this:

from(this.slides).pipe(
  concatMap((slide) => of(slide).pipe(
    tap((slide) => this.currentSlide = slide),
    delay(slide.slideTime)
  ))
).subscribe()

If observables are a bit too tricky for you, you can use the await/async method:

async goThroughSlides(): Promise<void> {
  for (let i = 0; i < this.slides.length; i++) {
    this.currentSlide = this.slides[i];
    await new Promise((resolve) => setTimeout(resolve, this.currentSlide.slideTime));
  }
}

I made an example stackblitz

edited Nov 13 '19 at 09:20

answered Nov 13 '19 at 08:24

Poul Kruijt

69,713
12
145
149

1

Thanks, you really helped me ^^ – niehoelzz Nov 13 '19 at 11:48

score -1 · Answer 2 · answered Nov 13 '19 at 08:06

create another variable that will hold the values for slides and use it in your html.

newSlides: any;

for(let i = 0; i < this.slides.length; i++){
        let slide = this.slides[i];
        setTimeout(() => {
            this.newSlides.push(slide);
        }, 2000*(i+1));
    }

How to make a for-loop wait some time before going through the loop again

2 Answers2