Apply style with setTimeout()

Question

I created the next code:

  setTimeout(function () {
        var dot = document.querySelectorAll('.dot');
        for (var i=0;i<dot.length;i++) {
            dot[i].style.backgroundColor = 'blue';
        }
    },2000);

 .container{
        display: flex;
        justify-content: space-around;
    }
   .dot{
       background-color: red;
       width: 20px;
       height: 20px;
       border-radius: 50%;
   }

<div class="container">
<div  class="dot"></div>
<div class="dot" ></div>
<div class="dot" ></div>
</div>

This code apply background-color for each dot at the same time after 2 seconds, but i want to apply the style for each dot separately. Fo example: after 2 seconds to apply the style for first dot, then after 2 seconds to apply the style for second dot, and so on. Who has a solution?

you can use setInterval – ControlAltDel May 28 '19 at 18:04 — ControlAltDel, May 28 '19 at 18:04

score 2 · Accepted Answer · answered May 28 '19 at 18:05

The simple way is to create separate timers, making each wait 2000ms longer than the last by multiplying by the loop index:

var dot = document.querySelectorAll('.dot');
for (let i=0;i<dot.length;i++) { // ***
    setTimeout(function () {
        dot[i].style.backgroundColor = 'blue';
    }, i * 2000);
}

Note also the use of let rather than var in the loop, so that each loop iteration gets its own copy of i. If you can't use ES2015 features, see this question's answers for how to deal with i in the for loop.

If we're using ES2015, we may as well use a for-of loop instead:

let i = 0;
for (const dot of document.querySelectorAll('.dot')) {
    setTimeout(() => {
        dot.style.backgroundColor = 'blue';
    }, i++ * 2000);
}

That relies on the NodeList from querySelectorAll being iterable, which it is on modern browsers. I don't know if there are any browsers with ES2015 but which don't (yet) make NodeList iterable; if there are any, you can use this answer's technique to add iterability.

score 2 · Answer 2 · answered May 28 '19 at 18:07

Put the setTimeout inside the for loop and the multiply i with 2000 to set different interval

var dot = document.querySelectorAll('.dot');
for (let i = 0; i < dot.length; i++) {
  setTimeout(function() {
    dot[i].style.backgroundColor = 'blue';
  }, i * 2000);

}

.container {
  display: flex;
  justify-content: space-around;
}

.dot {
  background-color: red;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

<div class="container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

score 0 · Answer 3 · answered May 28 '19 at 18:07

0

  var i = 0;
  var dot = document.querySelectorAll('.dot');
  var interval = setInterval(function () {
    dot[i].style.backgroundColor = 'blue';
    i++;
    if (i >= dot.length) clearInterval(interval);
  },2000);

answered May 28 '19 at 18:07

ControlAltDel

33,923
10
53
80

score 0 · Answer 4 · answered May 28 '19 at 18:16

You could try using the long way: ``` setTimeout(function () { var dot = document.querySelectorAll('.dot');

    setTimeout(function () {
        for (var i=0;i<dot.length;i++) {
        dot[0].style.backgroundColor = 'blue';
        }

        setTimeout(function () {
            for (var i=0;i<dot.length;i++) {
            dot[1].style.backgroundColor = 'blue';
            }
        },2000);

    },2000);
},2000);    
</script>```

But i would suggest (i * 2000)

score 0 · Answer 5 · answered May 28 '19 at 18:38

Try using setInterval, seems to be perfect for your case.

    var dotNumber = 0;
    var myVar = setInterval(() => {
        var dot = document.querySelectorAll('.dot');
        dot[dotNumber].style.backgroundColor = 'blue';

        dotNumber +=1; 

        if (dotNumber >= dot.length){
           clearInterval(myVar);
        }  
     }, 2000);

Apply style with setTimeout()

5 Answers5