如何在 for 循环内使用 setTimeout 更改 div 内容？答案

【问题标题】：How to change div content with setTimeout inside of a for loop?如何在 for 循环内使用 setTimeout 更改 div 内容？
【发布时间】：2023-04-05 16:30:01
【问题描述】：

我有以下代码。我希望标题做的是通过不同的文本“Head #”不断变化。该代码可以定期更改它，但只能更改一次。更改完成后，由于某种原因不循环并继续循环。

<p class="header">Head 1</p>

<script>
    var changeThis = document.getElementsByClassName("header");
    for(i=0;i<10000;i++){
        setTimeout(function() {
            changeThis[0].innerHTML = "Head 2";
        },5000)
        setTimeout(function() {
            changeThis[0].innerHTML = "Head 3";
        },10000)
        setTimeout(function() {
            changeThis[0].innerHTML = "Head 4";
        },15000)
        setTimeout(function() {
            changeThis[0].innerHTML = "Head 1";
        },20000)
    }
</script>

【问题讨论】：

你看过setInterval()函数/

标签： javascript html for-loop settimeout

【解决方案1】：

您似乎更愿意使用setInterval（每 x 毫秒运行一次代码）。这使您不必在一个循环中定义如此多的 setTimeouts（这可能会变得非常混乱）

这是我的意思的一个例子，它会按照你的意愿不断循环。

var changeThis = document.getElementsByClassName("header");
var headIndex = 2;

function change() {
  changeThis[0].innerHTML = "Head " + headIndex;
  headIndex++;
}

// run change function every 3 seconds
setInterval(change, 3000);

&lt;p class="header"&gt;Head 1&lt;/p&gt;

【讨论】：

【解决方案2】：

您正在寻找 setInterval，请注意，如果您希望它遍历 Head 1、Head 2、Head 3 等，您最好使用以下内容：

const elements = ["head1", "head2"...]

let currentIndex = 0
const INTERVAL_LENGTH = 5000

setInterval(() => {
    changeThis[0].innerHTML = elements[(currentIndex++)%elements.length]
}, INTERVAL_LENGTH)

【讨论】：

【解决方案3】：

感谢@Andrew_Lohr（和其他人）指向 setInterval。我最终为此使用的最终代码如下：

var changeThis = document.getElementsByClassName("header");

var headIndex = 1;

var headTitles = ["Head 1", "Head 2", "head 3", "Head 4"];

function change() {
    changeThis[0].innerHTML = headTitles[headIndex];
    headIndex++;
    if(headIndex > 3){
        headIndex=0;
    }
}

setInterval(change, 5000);

【讨论】：