javascript - 如何在 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 毫秒运行一次代码)。这使您不必在循环中定义如此多的 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>