间隔不稳定时的JavaScript函数

我正在一个个人网站上工作，我正试图制作一个小脚本，每隔几秒钟（目前为三秒）更改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>

我做

var words=[“程序”、“视频游戏”、“软件”、“音乐”、“棋盘游戏”、“网站”]；
var shift=setInterval（函数（）{
var word=words[Math.floor（Math.random（）*words.length）]；
$（“#名词”）。文本（单词）；
}, 3000);
window.onbeforeunload=函数（）{
清除间隔（移位）；
};

它在第一次使用时效果很好，但是如果我转到导航栏中的一个链接（例如Resume）和return home，它的行为几乎就像它有两个间隔，并且会两次切换单词。这个堆栈，我可以让它切换单词的速度比它应该的快5到6倍。但是，在刷新时，它会恢复正常

问题是什么？我如何解决

谢谢

如果是温泉， 确保正在清除间隔以防止其继续（并防止内存泄漏）

---

在导航之前使用

clearInterval（shift）

。

React:

componentWillUnmount（）{clearInterval（this.myINterval）}

Angularjs:

scope.$on（'destroy'，（）=>{clearInterval（this.interval）}

我正在努力研究如何在离开页面时运行函数，jQuery有一个不推荐的函数unload（），但这就是我所能找到的。我没有使用react，有什么建议吗？脚本在哪里？它目前只是在一个脚本标记中，计划在某些东西工作后移动到资产/javasripts中，因为我必须查找当它不是标记时如何引用它，该标记在哪里？@JonasW。我更新了这个问题，以包含整个page home.html.erb长话短说，删除TurboLink