jquery - setInterval 延迟仅在第一次起作用

Question

我的 setInterval 代码第一次工作正常，但它没有正确重复 - 第一次之后它不会在第一个实例和第二个实例之间延迟。这是我的代码或 setInterval 的问题吗？

    setInterval(function() {

        $('#img2').fadeIn(500).delay(5000).fadeOut(500);

    }, 5000);

为了澄清(如果我的代码真的很糟糕!)我希望我的 img 在 5 秒后淡入，停留 5 秒，然后淡出 - 5 秒后淡入，停留 5 秒，淡出;重复。

编辑:为了进一步澄清，我想我需要问:有没有办法在设置间隔时考虑函数中的延迟？现在，我的间隔与函数内的延迟同时发生，这导致间隔之间的时间为 0。

谢谢大家!

Answer 1

setInterval() 只是按照重复的时间表启动该函数，它并不根据每次重复所需的时间来进行重复。使用 setTimeout 安排在每次结束后的固定时间重新启动。

function delay_and_fade() {
    setTimeout(function() {
        $('#img2').fadeIn(500).delay(5000).fadeOut(500);
        delay_and_fade();
    }, 5000);
}

delay_and_fade();