JS foreach как сделать чтобы следующая итерация начиналась после конца предыдущей?

Question

[DarkRou]

Есть массив блоков, которые надо выводить с разной задержкой, в зависимости от содержания. Но при использовании простого foreach всё выводится сразу. Обычный setTimeout не помог. Погуглив я узнал что можно добавить в таймаут time * ++index. Все бы работало, если бы не то, что я не 1 блок за итерацию вывожу, а 2, и опять с разной задрежкой. Тут и начались проблемы, когда я добавил второй таймаут. Первый блок кода выполняется гараздо быстрее того, что внутри второго таймаута. Как это можно реализовать в теории? А с кодом шаманить буду сам, просто хочу узнать способы решения проблемы

Comments

[Kovalsky]

async/await

[Comsequent]

Два блока за итерацию, с разной задержкой. А что, если назначить им классы с анимацией? И поиграть со временем старта/длительности этой анимации?

[DarkRou]

Comsequent, не думаю что это вариант, там нужно именно добавлять блоки. Много заморочек короче, поэтому и не добавил код. Да и писать эти анимации намного больше времени займет, чем разобраться со временем циклов

[DarkRou]

Kovalsky, почитаю, спасибо

Answer 1

[Сергей Соколов]

const arr = [1,2,3,4,5]; // блоки
async function loop() {
  for (let i=0; i<arr.length; i++) {
    await new Promise((res) => setTimeout(res, 1000)); // пауза перед очередным
    console.log(arr[i]); // вывод блока
  }
}
loop();

Answer 2

[DarkRou]

Спустя 6 часов непрерывных мук с кодом, я нашел выход в виде, рекурсивной функции, с нужными таймаутами. Ответ Сергея Соколова было тем, что в теории могло решить мою проблему, но оказалось что для слишком замудренного кода это не лучший вариант. Логика моей рекурсии была в том что - сначала определялись все переменные, таймаут, добавление первого блока, таймаут, добавление второго блока, таймаут, и выполнение рекурсии с условием что index не больше 3

Answer 3

[hzzzzl]

когда я добавил второй таймаут

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

for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log('timeout #1', i), i * 1000)
  setTimeout(() => console.log('timeout #2 delayed 500ms', i), i * 1000 + 500)
}

и опять же, если просто нужна задержка анимации, то есть css transition-delay / animation-delay, типа блок уже добавил на страницу, но анимироваться он начнет через # миллисекунд