Как задержать две функции внутри цикла?

Question

Я искал весь день и не могу понять, как это исправить.

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

• Добавить класс
• Подождите 3 с
• Удалить добавленный класс
• Перейти к следующему элементу

Я пробовал много вещей, и теперь у меня есть это:

/* Avatars is an array of elements */
var i = 0
function testimonialCarousel(avatars){
    const avatarsLen = avatars.length
    avatars[i].classList.add("focused-avatar");
    i++;

    if (i > 0){
        avatars[i-1].classList.remove("focused-avatar");
    };

    if (i < avatarsLen) {    
        setTimeout(testimonialCarousel.bind({}, avatars), 3000);
    } else{
        i = 0;
    };
};

Я знаючто здесь уже есть много вопросов, касающихся задержки одной функции, например: Как добавить задержку в цикле JavaScript?

Это не мой случай. Я могу добиться этого, добавив класс для каждого элемента с интервалом 3 с. Чего я не могу достичь, так это шага «удалить класс».

Кто-нибудь может мне помочь?

Answer 1

Хорошо, я узнал, как с этим справиться:

for (let i = 0; i <= avatarsLen; i++){
        setTimeout(function(){
            if (i > 0){
                avatars[i-1].classList.remove("focused-avatar");
            };

            if (i == avatarsLen) {
                return testimonialCarousel();
            };

            avatars[i].classList.add("focused-avatar");
            balloonMessage.style.opacity = 0;
            balloonName.style.opacity = 0;
            setTimeout(function(){
                balloonMessage.innerHTML = balloonContent[i].message;
                balloonName.innerHTML = "— " + balloonContent[i].name;
                balloonMessage.style.opacity = 1;
                balloonName.style.opacity = 1;
            }, 650)

        }, i*3000);  /* <--- The solution lays here. */