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>

最佳答案

似乎您宁愿使用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>