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

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

3 个答案: