Изменение заголовка каждые несколько секунд, с массивом и контуром

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

Вы можете использовать setInterval для запуска вашей функции каждые n миллисекунд. Также обновили сокращенное значение, чтобы просто увеличивать индекс (или возвращаться к 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)