确保特定的setInterval函数实例仅运行一次

Question

我正在处理一个div(父),它有两个其他div(菜单和内容),如下所示:

<div id="parent">
  <div id="menu"></div>
  <div id="content"></div>
</div>

内容div中加载的内容是一个html文件,它具有一些javascript函数,例如每5秒重新加载其内容的自动刷新.

$(document).ready(function () {
  setInterval(function () {
    grid.reloadDefaultContent(); //this reloads the content on content div.
  }, 5000);
}

页面上有一些链接将不同的内容加载到内容div中.到目前为止一直很好,直到我回到"家",它具有自动刷新功能.问题是自动刷新从未停止过,现在我点击再次回到家中,该功能正在运行两次(或者我改变页面并返回主页的次数),将会话放在上面.我正在使用jQuery加载页面$.load().

关于如何使setInterval实例的任何想法只运行一次？

编辑:在看完我自己的问题之后,我看到它有点不清楚.我的主要问题是,当我回到家时,我的第一个setInterval实例已经运行,并且第二个实例启动,使得5秒的自动刷新变得更快,每次我都会越来越快更改页面并返回主页.这不是我想要的行为.我需要的是当我更改div上的内容时停止setInterval的实例,并在我回到主页时重新启动它.

Answer 1

这应该这样做:

var interval; // make sure that is defined outside of the loaded div content
$(document).ready(function () {
    if (typeof interval != "number"){
         interval = setInterval(function () {
         grid.reloadDefaultContent();
  }, 2000);
    }
});

它只会启动间隔计时器的一个实例.