每隔几秒更改一个标题，使用数组和循环

Question

我正在尝试创建一个 html 标题，它通过多个项目的数组和一个循环每 5 秒自行更改一次。我可以让一切正常工作，除了每隔五秒更改一次文本。现在，它立即从数组中的第一项到最后一项。我试过使用 setTimeOut 和 setInterval，但到目前为止还没有成功。我也在网上到处找了

这是我到目前为止的内容，没有 setTimeOut/setInterval 部分，因为它不起作用：

var headingChange = {

  heading: function() {
      var headings = ['Hello', 'Hi', 'Ye'];
      for (var i = 0; i < headings.length; i++) {
        document.getElementById('heading').innerHTML = headings[i];
      }
   }
};

这里有一个 jsfiddle 可以使它更容易 (+ html)。

https://jsfiddle.net/countermb/w9qwk6ch/

希望有人能帮助我（我是 Javascript 的新手）。提前致谢。

Answer 1

此代码段可能对您有所帮助。

您可能需要使用 setInterval 来更改标题。

var headings = ['Hello', 'Hi', 'Ye'];
var i = 0;
var intervalId = setInterval(function() {
  document.getElementById('heading').innerHTML = headings[i];
  if (i == (headings.length - 1)) {
    i = 0;
    //you can even clear interval here to make heading stay as last one in array
    //cleanInterval(intervalId);

  } else {
    i++;
  }
}, 4000)

<h1 id="heading">Change this!</h1>

Answer 2

您可以每 n 毫秒使用 setInterval 到运行您的函数。还更新了片段以仅增加索引（或返回 0）而不是使用 for 循环遍历数组。

var headingChange = {
  currentHeader: 0,
  headings: ['Hello', 'Hi', 'Ye'],
  heading: function() {
    document.getElementById('heading').innerHTML = this.headings[this.currentHeader];
    if (this.currentHeader === this.headings.length - 1) {
      this.currentHeader = 0;
    } else {
      this.currentHeader = this.currentHeader + 1;
    }
  } 
};

setInterval(function(){
  headingChange.heading();
}, 5000)

每隔几秒更改一个标题，使用数组和循环

Changing a heading every few seconds, with an array and a loop

html

javascript

arrays

settimeout

setinterval