Функция JavaScript при периодическом переходе

Я работаю на личном веб-сайте, и я пытаюсь сделать небольшой скрипт для изменения определенной части html каждые несколько секунд (три секунды на данный момент).

Он переключает текст внизу:

введите описание изображения здесь

К этому:

введите описание изображения здесь

EDIT: вся страница html.erb выглядит так:

<br />
<br />
<br />
<p>I make <strong id="noun"><%= @word %></strong>.</p>

<script>
var words = ["programs", "video games", "software", "music", "board games", "websites"];

var shift = setInterval(function(){ 
    var word = words[Math.floor(Math.random()*words.length)];
    $("#noun").text(word);
}, 3000);

window.onbeforeunload = function() {
   clearInterval(shift);
};
</script>

Он работает отлично в первый раз, но если я перейду к одной из ссылок на навигационной панели (например, «Возобновить») и вернуться домой, он действует почти так же, как у него есть два интервала, и будет переключаться на два раза чаще. Это стеки, и я могу заставить его переключать слова в 5 или 6 раз быстрее, чем нужно. Однако при обновлении он возвращается к нормальному состоянию.

В чем проблема и как я могу это исправить?

Благодаря!

javascript,ruby-on-rails,setinterval,

2
Яндекс.Метрика