Conditional Statements Array Looping

Question

I'm trying to create an image slider for a website, I want to learn why my array won't go back to zero after finishing the first iteration and keep on iterating. I want the slider to iterate on and on automatically.

function run() {
  for (let i = 0; i < imgArray.length; i++) {
    (function(e) {
      setTimeout(function() {
        if (i == imgArray.length) {
          i = 0;
        }

        imgContainer.style.background = imgArray[i];
      }, 3000 * e);
    })(i);
  };
  imgContainer.style.height = '100vh';
}

Mureinik · Accepted Answer · 2020-07-31 21:51:10Z

2

The condition i == imgArray.length inside the loop is never true, since the loop runs until i < imgArray.length. You could use <= instead as Ali Abug Hijleh suggested, but I think it would be easier to maintain if you explicitly show the loop should run forever with while (true) and use the % operator to get the right index:

function run() {
  let i = 0;
  while (true) {
    (function(e) {
      setTimeout(function() {
        imgContainer.style.background = imgArray[i % imgArray.length];
      }, 3000 * e);
    })(i);
  };
  imgContainer.style.height = '100vh';
  ++i;
}

answered Jul 31, 2020 at 21:51

Mureinik

316k54 gold badges396 silver badges405 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dzmitry Kushnarou · Accepted Answer · 2020-07-31 21:48:56Z

1

i will never reach the imgArray.length because the loop only works when i is less than imgArray.length (since you use i < imgArray.length as the condition)

Try if (i == imgArray.length -1) { ... } instead.

answered Jul 31, 2020 at 21:48

Dzmitry Kushnarou

5763 silver badges10 bronze badges

1 Comment

aromano108 Over a year ago

I already modified this as you suggest. Now it goes all the way to the end of the img array and after that it goes to the first img. How can I get the for loop to get going after arriving to the first value again?

TSR · Accepted Answer · 2020-07-31 21:50:10Z

0

That's because your for loop ends before you reset it to zero because you reset it to zero inside a setTimeout

answered Jul 31, 2020 at 21:50

TSR

21.5k32 gold badges123 silver badges250 bronze badges

Collectives™ on Stack Overflow

Conditional Statements Array Looping

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related