Как поставить интервал в переборе массива циклом?

Question

Как вписать интервал между итерациями цикла в моем коде, что бы каждый div красился с задержкой хотя бы в 1 секунду?

document.querySelector(".b12").addEventListener("click", function t12() {
let divs = document.querySelectorAll("div.out12");
let i = 0;
let outStr = '';
while (i < divs.length){
  outStr += divs[i].style.background = 'green';
  i++;
}
  document.querySelectorAll("div.out12").innerHTML = outStr;
});

Answer 1

document.querySelector(".b12").addEventListener("click", function t12() {
  let divs = document.querySelectorAll("div.out12");  
  for ( let i = 0; i < divs.length; i++) {   
    setTimeout(()=> divs[i].style.background = 'green',i*1000);    
  }  
});

.out12 {
  width: 50px;
  height: 30px;
  border: 1px solid grey;
  margin: 10px 0; 
}

<button class='b12'>Тыц</button>
<div class='out12'></div>
<div class='out12'></div>
<div class='out12'></div>
<div class='out12'></div>
<div class='out12'></div>

Вариант с while

document.querySelector(".b12").addEventListener("click", function t12() {
  const bg = (el,i) => {
    setTimeout(()=>el.style.background = 'green',i*1000);
  }
  let divs = document.querySelectorAll("div.out12");  
  let i=0;
  while (i < divs.length) {           
   bg(divs[i],i);
   i++;
  }  
});

.out12 {
  width: 50px;
  height: 30px;
  border: 1px solid grey;
  margin: 10px 0; 
}

<button class='b12'>Тыц</button>
<div class='out12'></div>
<div class='out12'></div>
<div class='out12'></div>
<div class='out12'></div>
<div class='out12'></div>

Answer 2

Делаем задержку в цикле при выполнении:

Сделаем функцию обработчик асинхронной, добавим фукнцию, эмулирующую задержку выполнения.

async function sleep(delay) {
  return new Promise(res => setTimeout(res, delay));
}

document.querySelector(".b12").addEventListener("click", async function t12() {
    const divs = document.querySelectorAll("div.out12");
    for (const div of divs) {
        div.style.background = 'green';
        await sleep(1000)
    }
});

.out12 {
    width: 100px;
    height: 30px;
    background-color: #0dcaf0;
}

<div class="out12"></div>
<div class="out12"></div>
<div class="out12"></div>
<div class="out12"></div>
<div class="out12"></div>
<div class="out12"></div>
<button class="b12">тык</button>

Answer 3

Предложу еще такой вариант...

document.querySelector(".b12").addEventListener("click", function t12() {
    const divs = document.querySelectorAll("div.out12");
    let i = 0
    test()
    function test() {
      divs[i].style.background = 'green';
      if (++i < divs.length) setTimeout(test, 1000)
    }
});

.out12 {
    width: 100px;
    height: 30px;
    background-color: #0dcaf0;
}

<div class="out12"></div>
<div class="out12"></div>
<div class="out12"></div>
<div class="out12"></div>
<div class="out12"></div>
<div class="out12"></div>
<button class="b12">тык</button>

БЛОГ НА HUSL

Как поставить интервал в переборе массива циклом?

Ответы (3 шт):