Я работаю на персональном веб-сайте и пытаюсь создать небольшой скрипт для изменения определенной части HTML каждые несколько секунд (в настоящий момент три секунды).
Переключает текст внизу от этого:

К этому:

РЕДАКТИРОВАТЬ: вся страница 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 раз быстрее, чем следовало бы. Однако при обновлении все возвращается на круги своя.
В чем проблема и как я могу это исправить?
Спасибо!