Question

我不知道如何通过使用setTimeout或setInterval来进行无限循环，这总是花费一秒钟的时间。在此代码中，第一秒和第二个三分之二的更改是正确的（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();
};

Answer 1

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

Answer 2

我的一条建议。
删除此部分：

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

来自changeSlide方法。
将其移至如下所示的window.onload上：

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

这样，当页面加载时，计划任务（即changeSlide()）将每秒被调用。
即window.onload将启动将被调用的过程每一秒。
这似乎是创建重复代码调用的更自然的方法。

setTimeout / Interval-无限循环

2 个答案: