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

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]

Напишем функцию перебора с задержкой элементов массивоподобного объекта, чтобы можно было делать так:

forEachWithDelay(
  document.querySelectorAll('.x'),
  1000,
  el => el.style.display = 'block'
);

Какие тут есть варианты:

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

function forEachWithDelay(arr, delay, callback) {
  Array.prototype.forEach.call(arr, (n, i) => {
    setTimeout(callback, (i + 1) * delay, n);
  });
}

Два - рекурсивные таймауты, следующий назначается в коллбеке предыдущего:

function forEachWithDelay(arr, delay, callback) {
  (function next(i) {
    if (i < arr.length) {
      setTimeout(() => {
        callback(arr[i]);
        next(-~i);
      }, delay);
    }
  })(0);
}

Три - интервал:

function forEachWithDelay(arr, delay, callback) {
  let i = -1;
  const intervalId = setInterval(() => {
    if (++i < arr.length) {
      callback(arr[i]);
    } else {
      clearInterval(intervalId);
    }
  }, delay);
}

Answer 4

[akavato]

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