@DarkRou

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

Есть массив блоков, которые надо выводить с разной задержкой, в зависимости от содержания. Но при использовании простого foreach всё выводится сразу. Обычный setTimeout не помог. Погуглив я узнал что можно добавить в таймаут time * ++index. Все бы работало, если бы не то, что я не 1 блок за итерацию вывожу, а 2, и опять с разной задрежкой. Тут и начались проблемы, когда я добавил второй таймаут. Первый блок кода выполняется гараздо быстрее того, что внутри второго таймаута. Как это можно реализовать в теории? А с кодом шаманить буду сам, просто хочу узнать способы решения проблемы
  • Вопрос задан
  • 162 просмотра
Решения вопроса 2
sergiks
@sergiks Куратор тега JavaScript
♬♬
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();
Ответ написан
@DarkRou Автор вопроса
Спустя 6 часов непрерывных мук с кодом, я нашел выход в виде, рекурсивной функции, с нужными таймаутами. Ответ Сергея Соколова было тем, что в теории могло решить мою проблему, но оказалось что для слишком замудренного кода это не лучший вариант. Логика моей рекурсии была в том что - сначала определялись все переменные, таймаут, добавление первого блока, таймаут, добавление второго блока, таймаут, и выполнение рекурсии с условием что index не больше 3
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
hzzzzl
@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, типа блок уже добавил на страницу, но анимироваться он начнет через # миллисекунд
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы