javascript时间间隔越来越长

我为按钮上的动画制作了一个代码

cta.addEventListener("mouseover", () => {
            setTimeout(() => {
                audio.play()
                audio.volume = .06;

                imgs[0].style.transform = "translate(0, 0)";
                
                setTimeout(() => {
                    imgs[2].style.transform = "translate(0, 0)";
                }, 150);
                
                setTimeout(() => {
                    imgs[1].style.transform = "translate(0, 0)";
                }, 200);
                
                setTimeout(() => {
                    imgs[5].style.transform = "translate(0, 0)";
                }, 250);
                
                setTimeout(() => {
                    imgs[3].style.transform = "translate(0, 0)";
                }, 300);
                setTimeout(() => {
                    imgs[4].style.transform = "translate(0, 0)";
                }, 600);
            }, 100);
        });

但这并不令人愉快

---

如何改进此代码？？仅设置一个setInterval，并使该值随着每次执行而增加？？？

稍微好一点的代码版本：

cta.addEventListener("mouseover", () => {
    setTimeout(() => {
        audio.play()
        audio.volume = .06;

        imgs[0].style.transform = "translate(0, 0)";
        transformImage(imgs[2], 150);
        transformImage(imgs[1], 200);
        transformImage(imgs[5], 250);
        transformImage(imgs[3], 300);
        transformImage(imgs[4], 600);
    }, 100);
});

function transformImage(img, interval) {
    setTimeout(() => {
        img.style.transform = "translate(0, 0)";
    }, interval);
}

进一步改进：

cta.addEventListener("mouseover", () => {
        setTimeout(() => {
            audio.play()
            audio.volume = .06;

            imgs[0].style.transform = "translate(0, 0)";
            let offset = 150;
            imgs.forEach(img => transformImage(img, offset+=50));
        }, 100);
    });
    
    function transformImage(img, interval){
            setTimeout(() => {
                img.style.transform = "translate(0, 0)";
        }, interval);
    }

---

稍微好一点的代码版本：

cta.addEventListener("mouseover", () => {
    setTimeout(() => {
        audio.play()
        audio.volume = .06;

        imgs[0].style.transform = "translate(0, 0)";
        transformImage(imgs[2], 150);
        transformImage(imgs[1], 200);
        transformImage(imgs[5], 250);
        transformImage(imgs[3], 300);
        transformImage(imgs[4], 600);
    }, 100);
});

function transformImage(img, interval) {
    setTimeout(() => {
        img.style.transform = "translate(0, 0)";
    }, interval);
}

进一步改进：

cta.addEventListener("mouseover", () => {
        setTimeout(() => {
            audio.play()
            audio.volume = .06;

            imgs[0].style.transform = "translate(0, 0)";
            let offset = 150;
            imgs.forEach(img => transformImage(img, offset+=50));
        }, 100);
    });
    
    function transformImage(img, interval){
            setTimeout(() => {
                img.style.transform = "translate(0, 0)";
        }, interval);
    }

---

我能看到的唯一改进方法是使用for循环：

cta.addEventListener（“鼠标悬停”，（）=>{
设置超时（（）=>{
音频播放
音频音量=.06；
让时间=[0，200，150，300，600，250]
times.forEach（函数（让idx表示时间）{
设置超时（（）=>{
imgs[idx].style.transform=“翻译（0,0）”；
}，次[idx]）；
}
}, 100);)
});我能看到的唯一改进方法是使用for循环：


cta.addEventListener（“鼠标悬停”，（）=>{
设置超时（（）=>{
音频播放
音频音量=.06；
让时间=[0，200，150，300，600，250]
times.forEach（函数（让idx表示时间）{
设置超时（（）=>{
imgs[idx].style.transform=“翻译（0,0）”；
}，次[idx]）；
}
}, 100);)
});
CSS动画或转换更适合吗？
setTimeout
只保证代码不会在指定的时间内执行。这并不意味着代码将在超时过期时完全执行。有关更多信息，请参见此。CSS动画或转换更适合吗？
setTimeout
仅保证代码不会在指定的时间内执行。这并不意味着代码将在超时过期时完全执行。有关更多信息，请参见此。