Javascript 设置超时/间隔-无限循环

我不知道如何使用

setTimeout

或

setInterval

进行无限循环，这两种方法一直都需要1秒的时间。在这段代码中，第一个第二个和第二个第三个更改是正确的（1秒），但在第三个和第一个之间大约需要2秒。你能帮帮我吗

const n1 = document.getElementById("n1");
const n2 = document.getElementById("n2");
const n3 = document.getElementById("n3");

let num = 0;

const changeSlide = () => {
    num++;
    if (num > 3) num = 0;
    if (num == 0) {
        n1.style.display = "flex";
        n2.style.display = "none";
        n3.style.display = "none";
    } else if (num == 1) {
        n1.style.display = "none";
        n2.style.display = "flex";
        n3.style.display = "none";
    } else {
        n1.style.display = "none";
        n2.style.display = "none";
        n3.style.display = "flex";
    }
    setTimeout(() => {
        changeSlide();
    }, 1000);
};

window.onload = () => {
    changeSlide();
};

---

因为第三个条件是两次解析为

true

。您正在检查数字是否大于3，但您有0、1和其他所有条件。因此，当数字为2且数字为3时，

else

块为真。因此，最后一部分执行两次。若要解决此问题，请更改

if（num>3）num=0=3）num=0，则代码>到
，因为第三个条件是两次解析为
true
。您正在检查数字是否大于3，但您有0、1和其他所有条件。因此，当数字为2且数字为3时，
else
块为真。因此，最后一部分执行两次。若要解决此问题，请更改
if（num>3）num=0=3）num=0，则代码>到
我的一条建议

删除此部分：

setTimeout(() => {
    changeSlide();
}, 1000);

从
更改幻灯片
方法。

将其移动到
窗口。onload
如下所示：

window.onload = () => {
    setInterval(() => {
         changeSlide();
    }, 1000);
};

这样，当加载页面时，计划任务（即
changeSlide（）
）将每秒调用一次。
也就是说，
window.onload
将启动每秒调用的进程。

这似乎是创建重复代码调用的更自然的方式。
我的一条建议

删除此部分：

setTimeout(() => {
    changeSlide();
}, 1000);

从
更改幻灯片
方法。

将其移动到
窗口。onload
如下所示：

window.onload = () => {
    setInterval(() => {
         changeSlide();
    }, 1000);
};

这样，当加载页面时，计划任务（即
changeSlide（）
）将每秒调用一次。
也就是说，
window.onload
将启动每秒调用的进程。

这似乎是创建重复代码调用的更自然的方式