Как зациклить setTimeOut?

Question

[ForSureN1]

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

let preloadImg = document.querySelectorAll('.pr-bub');

let arrayBub = Array.from(preloadImg)

let reverseArray = arrayBub.reverse();

reverseArray.forEach((bub, index, array) => {
    setTimeBub(bub, index);
    if ((index + 1) == array.length) {
        setTimeout(() => {
            reverseArray.forEach(item => {
                item.classList.remove('animationPreBub')
            })
            setTimeBub(bub, index);
        }, 300 * index)
    }
})

function setTimeBub(bub, index) {
    setTimeout(() => {
        bub.classList.add('animationPreBub')
    }, 300 * index)
}

Answer 1

[Дмитрий Беляев]

const preloadImages = document.querySelectorAll('.pr-bub');
const preloadImagesAnimationInterval = setInterval((state) => {
    const item = preloadImages[state.index];
    item.classList.toggle('animationPreBub', state.addClass);
    state.index--;
    if (state.index < 0) {
        state.addClass = !state.addClass;
        state.index = preloadImages.length - 1;
    }
}, 300, {
    addClass: true,
    index: preloadImages.length - 1,
});

Comments

[ForSureN1]

Ваш пример работает, но видите в чем еще проблема, нужно так, чтобы пузыри удалялись все одновременно, а не так же поочередно как появляются

[Дмитрий Беляев]

ForSureN1, ну а в чем проблема поправить пример под нужные требования?
Одно дело, когда я сделал его на чистом энтузиазме, что бы показать как это можно сделать, другое дело, если я буду делать Вашу работу за Вас...
Я конечно могу сделать Вашу работу за Вас, но не хочу...

[ForSureN1]

Дмитрий Беляев, Все понял, спасибо за потраченное время :)

Answer 2

[ForSureN1]

Разобрался собственно сам, запутался в вызовах тайм аута, и вынес в отдельную функцию которая при index === array.lenght очищает все классы, и опять же вызывает сама себя :)

let preloadImg = document.querySelectorAll('.pr-bub');

let arrayBub = Array.from(preloadImg)

let reverseArray = arrayBub.reverse();

function setClassBub() {
    reverseArray.forEach((bub, index) => {
        setTimeout(() => {
            bub.classList.add('animationPreBub')
            if (index === (reverseArray.length - 1)) {
                setTimeout(() => {
                    reverseArray.forEach((item) => {
                        item.classList.remove('animationPreBub')
                    })
                }, 200)

                setClassBub();
            }
        }, 300 * (index + 1))
    })
}

setClassBub();

Comments

[sladkiy_voytik]

Существует метод "setInterval", который поможет реализовать задуманный функционал без рекурсии. Кст, я еще молод и не до конца уверен, но по моему так, как ты сделал, делать не стоит из-за ограниченной глубины рекурсии.

[ForSureN1]

sladkiy_voytik, да я такую задачу на самом деле первый раз делаю, поэтому писал отталкиваясь от своих навыков )

[WapSter]

Это говнокод, а не верное решение

[ForSureN1]

WapSter, Предложите верное :)

[ForSureN1]

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

[Дмитрий Беляев]

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

sladkiy_voytik, Ограничение глубины рекурсии - это прямое следствие из ограничения размера стека, при асинхронных вызовах стек очищается между ними.

Простой пример:
1. Функция упадет с ошибкой из-за бесконечной рекурсии и переполнения стека:

(function f() {
  f();
})();

2. Функция повесит все намертво из-за особенностей event-loop микротасков, но ошибки не будет:

(function f() {
  Promise.resolve().then(f);
})();

3. Будет крутится вечно и ничего не повесит:

(function f() {
  setTimeout(f, 0);
})();