Как задать задержку в цикле for?

Question

[Elvizlir]

Здравствуйте! Учу javascript, для интереса решил написать простую программку, которая спрашивает у пользователя число и рисует заданное количество разноцветных кружков в пределах экрана. Всё работает через цикл for, но я хочу что бы они все появлялись не одновременно, а с задержкой в 100мс. Пытался вызвать функцию в цикле через setTimeout, но задержка происходит единожды, после чего всё рисуется сразу. Прошу дать совет, что, как и куда писать, что бы всё работало. Спасибо.

let $body = document.querySelector('body');
let $bodyH = $body.clientHeight;
let $bodyW = $body.clientWidth;
let ask = prompt('How many circles you want to draw?');

if (ask !== null || ask !== '') {
  for (let i = 0; i < ask; i++) {
    drowCircle(i);
  }
}

function drowCircle(i) {
  let $circle = document.createElement('div');
  let $circleSize = getRand(50, 100);
  let positionX = getRand(0, $bodyW - $circleSize);
  let positionY = getRand(0, $bodyH - $circleSize);

  $body.insertAdjacentElement('afterbegin', $circle);

  $circle.style.width = $circle.style.height = `${$circleSize}px`;
  $circle.style.zIndex = i+1;
  $circle.style.backgroundColor = `rgb(${getRand(0,255)},${getRand(0,255)},${getRand(0,255)})`;
  $circle.style.borderRadius = '50%';
  $circle.style.position = 'absolute';
  $circle.style.top = `${positionY}px`;
  $circle.style.left = `${positionX}px`;
}

function getRand(min, max) {
  let rand = min - 0.5 + Math.random() * (max - min + 1);
  return Math.round(rand);
}

Answer 1

[RMate]

if (ask !== null || ask !== '') {
  for (let i = 0; i < ask; i++) {
    setTimeout(() => {
      drowCircle(i);
    }, i * 100);
  }
}

Comments

[Elvizlir]

А можно чуть по подробнее объяснить, зачем нам на каждом этапе задержку увеличивать в прогрессии?

[Interface]

Elvizlir, почитайте про замыкания в JS, код выше - каноническое упражнение по теме.

Так нужно потому что таймауты установятся без задержки, соответственно вы получите все ваши круги одномоментно, но с задержкой

[2CHEVSKII]

Ну, по хорошему бы генератор написать, а не кучу таймеров создавать. Что будет, если пользователь задаст число в 10000? 1000000?
Ну, к слову просто.

[WapSter]

Рекурсия тут более уместна

Answer 2

[Interface]

let $body = document.querySelector('body');
let $bodyH = $body.clientHeight;
let $bodyW = $body.clientWidth;

function sleep(ms) {
	return new Promise(resolve => setTimeout(resolve, ms));
}

async function main() {
	let ask = prompt('How many circles you want to draw?');

  if (ask !== null || ask !== '') {
    for (let i = 0; i < ask; i++) {
      drowCircle(i);
      await sleep(1000);
    }
  }
}

main();

function drowCircle(i) {
  let $circle = document.createElement('div');
  let $circleSize = getRand(50, 100);
  let positionX = getRand(0, $bodyW - $circleSize);
  let positionY = getRand(0, $bodyH - $circleSize);

  $body.insertAdjacentElement('afterbegin', $circle);

  $circle.style.width = $circle.style.height = `${$circleSize}px`;
  $circle.style.zIndex = i+1;
  $circle.style.backgroundColor = `rgb(${getRand(0,255)},${getRand(0,255)},${getRand(0,255)})`;
  $circle.style.borderRadius = '50%';
  $circle.style.position = 'absolute';
  $circle.style.top = `${positionY}px`;
  $circle.style.left = `${positionX}px`;
}

function getRand(min, max) {
  let rand = min - 0.5 + Math.random() * (max - min + 1);
  return Math.round(rand);
}