Javascript 如何在for循环中使用setTimeout更改div内容？

我有以下代码。我想让标题做的是通过不同的文本“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>

标题1
var changeThis=document.getElementsByClassName（“标题”）；
对于（i=0；i，您似乎更愿意使用（每x ms运行一次代码）。这样您就不必在一个循环中定义这么多设置超时（这可能会变得非常混乱）

这里有一个例子，我的意思是，它将继续循环，因为你想


var changeThis=document.getElementsByClassName（“header”）；
风险价值指数=2；
函数更改（）{
更改此[0]。innerHTML=“Head”+headIndex；
headIndex++；
}
//每3秒钟运行一次更改功能
设置间隔（更改，3000）；
Head 1
您似乎更愿意使用（每x ms运行一次代码）。这样您就不必在循环中定义太多设置超时（这可能会变得非常混乱）

这里有一个例子，我的意思是，它将继续循环，因为你想


var changeThis=document.getElementsByClassName（“header”）；
风险价值指数=2；
函数更改（）{
更改此[0]。innerHTML=“Head”+headIndex；
headIndex++；
}
//每3秒钟运行一次更改功能
设置间隔（更改，3000）；
head1
您正在寻找的，请注意，如果您希望它在head1、head2、head3等处迭代，您最好使用以下内容：

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

let currentIndex = 0
const INTERVAL_LENGTH = 5000

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

您正在寻找，请注意，如果您希望它在头1、头2、头3等处迭代，您最好使用以下内容：

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

let currentIndex = 0
const INTERVAL_LENGTH = 5000

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

感谢@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);

感谢@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);

您是否查看了
setInterval（）
函数/是否查看了
setInterval（）
函数/