时间戳

首页 > 解决方案 > 如何在循环中延迟两个函数？

javascript - 如何在循环中延迟两个函数？

问题描述

我一直在寻找一整天，我无法弄清楚如何解决它。

我想做的就是遍历一堆元素并对每个元素执行以下操作：

我已经尝试了很多东西，现在我有了这个：

/* 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 循环中添加延迟？

这不是我的情况。我可以实现它，为每个元素添加一个 3s 间隔的类。我无法实现的是“删除类”步骤。

有人可以帮助我吗？

标签： javascriptasynchronous

解决方案

好的，我已经找到了如何处理它：

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. */

推荐阅读