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

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 elements = document.querySelectorAll('.x');
const delay = 1000;
const updateElement = el => el.style.display = 'block';

Вариант раз - таймауты сразу для всех элементов:

elements.forEach((n, i) => setTimeout(updateElement, i * delay, n));

Вариант два - интервал:

let index = -1;

const intervalId = setInterval(() => {
  const el = elements.item(++index);
  if (el) {
    updateElement(el);
  } else {
    clearInterval(intervalId);
  }
}, delay);

Вариант три - рекурсивные таймауты:

(function next(index) {
  if (index < elements.length) {
    setTimeout(() => {
      updateElement(elements[index]);
      next(index + 1);
    }, delay);
  }
})(0);

Answer 4

[akavato]

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