区间上的 JavaScript 函数不稳定

Question

我在个人网站上工作，我正在尝试制作一个小脚本来每隔几秒(目前是三秒)更改 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>

它第一次运行完美，但如果我转到导航栏中的一个链接(例如 Resume)并返回主页，它的行为几乎就像它有两个间隔并且会以两倍的频率切换单词。这个堆栈，我可以让它以比它应该的速度快 5 或 6 倍的速度切换单词。但是，在刷新时，它会恢复正常。

问题是什么，我该如何解决？

谢谢!

Answer 1

如果是SPA，确保您正在清除间隔以防止它继续(并防止内存泄漏)

在导航之前使用clearInterval(shift)。