配列とループを使用して数秒ごとに見出しを変更する

Question

複数の項目やループの配列を使って5秒ごとに変更される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]; 
     } 
    } 
}; 

ここで（+ HTML）、それを容易にするためにjsfiddleです。誰かが私を助けることができる

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を使用することができます。また、forループで配列をループするのではなく、インデックスをインクリメントする（または0に戻る）ようにsnippedを更新しましたか？

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)