setInterval与setTimeout执行时机异常，背景图无延迟瞬间切换如何解决

• 你在setInterval回调中一次性注册了3个延迟时长均为3000ms的setTimeout，三者会同时开始计时，3秒后几乎同步触发执行，索引i会在极短时间内完成三次更新，导致背景图连续快速切换，没有预期的间隔效果
• 外层setInterval本身的触发间隔也是3000ms，相当于每3秒就会重复注册一批新的3秒延迟定时器，逻辑完全冲突，无法实现按顺序间隔切换的需求

不需要同时嵌套setInterval和多个setTimeout，仅靠setInterval本身的定时触发能力就能实现需求，实现代码如下：

let images = ['background1.jpg', 'background2.jpg','background3.jpg'];
let i = 0;
// 初始化第一张背景图
$("main").css({
    "background-image": `url(${images[i]})`,
    "background-size": "cover"
});
// 每3秒切换一张背景图
setInterval(() => {
    // 索引取模实现循环切换，不需要手动判断边界
    i = (i + 1) % images.length;
    $("main").css("background-image", `url(${images[i]})`);
}, 3000);

如果需要背景图切换时有渐变过渡效果，可以给main元素加CSS过渡属性：

main {
    transition: background-image 0.6s ease-in-out;
}

内容的提问来源于stack exchange，提问作者Vaggelaras