时间间隔不稳定的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)。