How to put this JavaScript code into a loop?

Question

I have this piece of code who kinda follows a pattern but I don't know how to make it a loop to simplify.

setTimeout(() => {
    wrapper.classList.add("show-el-1");
    wrapper.classList.add("hide-el-0");
}, 600);

setTimeout(() => {
    wrapper.classList.add("show-el-2");
    wrapper.classList.add("hide-el-1");
}, 1800);

setTimeout(() => {
    wrapper.classList.add("show-el-3");
    wrapper.classList.add("hide-el-2");
}, 3000);

setTimeout(() => {
    wrapper.classList.add("show-el-4");
    wrapper.classList.add("hide-el-3");
}, 4200);

It adds 1200 in every setTimeout duration, and changes the show-el-x and hide-el-y numbers.

Consider setInterval: developer.mozilla.org/en-US/docs/Web/API/… — Slava Knyazev
– Slava Knyazev, Commented Apr 12, 2021 at 21:06
wouldn't setInterval for doing something at fixed time intervals, not incremental time intervals — Ravi Chaudhary
– Ravi Chaudhary, Commented Apr 12, 2021 at 21:17

Unmitigated · Accepted Answer · 2021-04-12 21:19:08Z

1

You can use a for loop like so:

for(let i = 0; i < 4; i++){
    setTimeout(() => {
        wrapper.classList.add("show-el-" + (i + 1));
        wrapper.classList.add("hide-el-" + i);
    }, 600 + i * 1200);
}

answered Apr 12, 2021 at 21:19

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

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

Comments

charlietfl · Accepted Answer · 2021-04-12 21:18:20Z

1

Something like this should get you going

for (let i = 0; i < 4; i++) {
  const delay = 600 + (i * 1200)
  setTimeout(() => {
    wrapper.classList.add("show-el-" + (i + 1));
    wrapper.classList.add("hide-el-" + i);
  }, delay);    
}

answered Apr 12, 2021 at 21:18

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

Ravi Chaudhary · Accepted Answer · 2021-04-12 21:27:08Z

0

If you just want to keep this running i.e. updating class after every timeout, then you could go for recursive approach as the snippet below, else for loop could be a more readable and easy to understand solution

let newTimeout = 600;
let firstClass= 1;
const func1 = () => {
    wrapper.classList.add(`show-el-${firstClass}`);
    wrapper.classList.add(`hide-el-${firstClass -1}`);
    newTimeout += 1200;
    firstClass += 1;
    setTimeout(func1, newTimeout);
};
setTimeout(func1, newTimeout);

edited Apr 12, 2021 at 21:27

answered Apr 12, 2021 at 21:16

Ravi Chaudhary

6709 silver badges22 bronze badges

2 Comments

user6749601 Over a year ago

Did you recognize that the class names change too?

Ravi Chaudhary Over a year ago

fixed it. didn't notice earlier

Collectives™ on Stack Overflow

How to put this JavaScript code into a loop?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related