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

Question

我有以下代码。 我希望标题执行的操作是连续更改不同的文本“ 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>

Answer 1

似乎您宁愿使用setInterval （每x ms运行一次代码）。 这使您不必在循环中定义这么多的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); 

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

Answer 2

您正在寻找setInterval ，请注意，如果要迭代头1，头2，头3等，可能会更好，例如：

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

let currentIndex = 0
const INTERVAL_LENGTH = 5000

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

Answer 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);