setTimeout/Interval - 无限循环答案

【问题标题】：setTimeout/Interval - infinity loopsetTimeout/Interval - 无限循环
【发布时间】：2018-07-30 18:35:50
【问题描述】：

我不知道如何使用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();
};

【问题讨论】：

标签： javascript loops settimeout

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：