Правильно ли так работать с setTimeout?

Question

[ArtJH]

У меня есть ряд событий и таймеров
1) После загрузки экрана через 1 сек
2) После этого другое действие
3) После другое
4) Другое
И так может быть раз 20-30

Важна последовательность, чтоб действие не начиналась пока не закончится прошлое

На данный момент у меня код так.
И я знаю что мой способ отнюдь не лучший вариант. Так как у меня не регулируется закончилось действие или нет по факту, а регулирует таймер по времени.
Мне это нужно для работы с анимацией. После того как анимация закончилась, у меня срабатывает новый таймер с анимацией

Подскажите куда копать?
И как вообще лучше и оптимальней работать с таймерами когда их очень много

window.setTimeout(function () {
        // какое-нибудь действие
    }, 500);

    window.setTimeout(function (){
       // какое-нибудь действие
    },4000);

    window.setTimeout(function (){
      // какое-нибудь действие
    },5000);

  window.setTimeout(function (){
      // какое-нибудь действие
    },7000);

Comments

[twobomb]

Используй промис или новый таймаут ставь по завершение прошлого действия. А лучше опиши что ты хочешь получить

[DanKud]

Используйте промисы в паре с async/await и будет гораздо проще. Такое нагромождения таймеров это ни к чему.

[ArtJH]

twobomb, Мне это нужно для работы с анимацией. После того как анимация закончилась, у меня срабатывает новый таймер с анимацией

[ArtJH]

DanKud, Спасибо

[DanKud]

ArtJH, причем если у вас повторяющиеся действия с изменением лишь некоторых атрибутов, то можно просто зациклить эти действия в async/await и такой код будет в минимум строк вообще.

[WapSter]

ArtJH, жуть то какая, для этого есть нормальные события, например transitionend

Answer 1

[Станислав Некрасов]

Может быть так:

Comments

[Mesuti]

интеерсное решение

Answer 2

[Александр]

Подскажите куда копать?

for, break, метки, async/await

Answer 3

[Mr_Sergo]

по окончании одной анимации можно запускать следующую по animationend https://developer.mozilla.org/en-US/docs/Web/API/H... или transitionend https://developer.mozilla.org/ru/docs/Web/Events/t...

демка https://codepen.io/Mr_Sergo/pen/KKzqPyw

Answer 4

[Сергей delphinpro]

Простая очередь на промисах:



Кроме того, есть готовые библиотеки для организации очередей/стеков

Но вероятно вам не нужен сам таймаут, а нужно просто дождаться выполнения какой-то задачи.
Поэтому его уберем, и используем просто как имитацию задержки
https://jsfiddle.net/DelphinPRO/pfL9znoh/2/