Как замедлить цикл прерыванием времени?

Question

[Ingernirated]

Всем привет!
Есть функция

let x = document.querySelectorAll(".x");

function move() {
x.forEach((e) => {
e.style.display = "block";
}

Как её заставить перед очередным срабатыванием для следующего элемента e ждать по 1 сек?

Answer 1

[Алексей Ярков]

let x = document.querySelectorAll(".x")

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

async function move() {
  x.forEach((e) => {
	await sleep(1000)
	e.style.display = "block"
  }
}

Answer 2

[dollar]

function move() {
    let wait = 0;
    x.forEach((e) => {
        setTimeout(function() {e.style.display = "block";}, wait);
        wait += 1000;
    }
}

Answer 3

[0xD34F]

const onTimeout = el => el.style.display = 'block';

document.querySelectorAll('.x').forEach((n, i) => {
  setTimeout(onTimeout, i * 1000, n);
});

или

let index = -1;

const intervalId = setInterval(items => {
  const el = items[++index];
  if (el) {
    el.style.display = 'block';
  } else {
    clearInterval(intervalId);
  }
}, 1000, document.querySelectorAll('.x'));

или

(function next(items, index) {
  if (items[index]) {
    setTimeout(() => {
      items[index].style.display = 'block';
      next(items, index + 1);
    }, 1000);
  }
})(document.querySelectorAll('.x'), 0);

Answer 4

[akavato]

https://lodash.com/docs/4.17.5#throttle