Set a delay between each element in an array using a for loop

Question

I'm trying to change the opacity of each element in an array but with a slight delay between each element. I've tried a bunch of variations of the simplified code snippet below but each time either they all change at once with a delay or nothing changes. Whats the correct syntax for this code?

for (let i = 0; i < testArray.length; i++) {
  setTimeout(function() {testArray[i].style.opacity = ".5"}, 500);
}

Use setTimeout(function() {testArray[i].style.opacity = ".5"}, 500*(i+1)); — Vinay
– Vinay, Commented Feb 20, 2017 at 5:37
@Novice You can add that as an answer. This seems like something that would have been asked here before, but I can't find a good duplicate. — JLRishe
– JLRishe, Commented Feb 20, 2017 at 5:46
@Novice not sure how to set comments as answers, but thanks that helped a lot! I looked around a bunch and I couldn't find that answer anywhere! — Zach
– Zach, Commented Feb 20, 2017 at 6:15
Sorry for replying a bit late I was busy for a while .Since you couldn't find any duplicate I've added my answer — Vinay
– Vinay, Commented Feb 20, 2017 at 10:48

Vinay · Accepted Answer · 2017-02-20 11:07:52Z

2

Since you're using let asynchronicity is not the issue here rather it's just timing.You just need to change

 setTimeout(function() {testArray[i].style.opacity = ".5"}, 500);

To

 setTimeout(function() {testArray[i].style.opacity = ".5"}, 500*(i+1));

This would set timer for items in increasing amounts of 500 ms like 500,1000,1500 and so on

edited Feb 20, 2017 at 11:07

answered Feb 20, 2017 at 10:48

Vinay

7,7247 gold badges28 silver badges49 bronze badges

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

Comments

Ali Ezzat Odeh · Accepted Answer · 2017-02-20 06:56:25Z

0

Try using setInterval in case it didn't work with setTimeout like the following :

   var counter = 0;
   var arrayLength =testArray.length;
   var refOfSetInterval;

   function changeOpacity(){
    if(counter < arrayLength){
    testArray[counter].style.opacity = ".5";
    counter++;
    }
    else{
    clearInterval(refOfSetInterval);
    }
   }

  refOfSetInterval = setInterval(changeOpacity,1000);

answered Feb 20, 2017 at 6:56

Ali Ezzat Odeh

2,1631 gold badge20 silver badges18 bronze badges

Comments

Kishan Oza · Accepted Answer · 2017-02-20 07:19:09Z

0

you can use $('').slideUp(2000); method to delay between your two element i used this several times.its works fine

answered Feb 20, 2017 at 7:19

Kishan Oza

1,7351 gold badge19 silver badges39 bronze badges

Collectives™ on Stack Overflow

Set a delay between each element in an array using a for loop

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related