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

如何解决确保特定的setInterval函数实例仅运行一次

| 我正在一个具有两个其他div（菜单和内容）的div（父）上，如下所示：

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

content div中加载的内容是一个具有一些javascript功能的html文件，例如每5秒重新加载一次其内容的自动刷新。

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

页面上有一些链接可以将不同的内容加载到内容div中。到目前为止，一切都很好，直到我回到具有自动刷新功能的“ home”为止。问题是自动刷新从未停止过，现在我单击以再次回到主页，该功能运行了两次（或者我更改了页面并回到主页的次数），从而开始了会话。 我正在使用jQuery

$.load()

加载页面。 关于如何使setInterval实例运行的任何想法只能运行一次？ 编辑：在阅读我自己的问题后，我发现这还不清楚。我的主要问题是，当我回到家中时，我的setInterval的第一个实例已经在运行，而第二个实例已经启动，使得5秒钟的自动刷新变得越来越快，并且每次都会越来越快我更改页面并返回首页。这不是我想要的行为。我需要的是在更改div上的内容时停止setInterval的实例，然后在回到家时重新启动它。     

解决方法

        应该这样做：

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);
    }
});

它只会启动间隔计时器的一个实例。     ,        如果只希望它运行一次，为什么不使用\“ setTimeout（）\”代替呢？ 尝试这个：

$(document).ready(function () {
  if (!$(\'body\').hasClass(\'refresh-started\')) {
    setInterval(function () {
      grid.reloadDefaultContent(); //this reloads the content on content div.
    },5000);
    $(\'body\').addClass(\'refresh-started\');
  }
}

另一种选择是始终重新启动计时器：

$(document).ready(function() {
  clearInterval($(\'body\').data(\'refresh-interval\'));
  $(\'body\').data(\'refresh-interval\',setInterval(function() {
    grid.reloadDefaultContent(); //this reloads the content on content div.
  },5000));
});

哪个更好取决于您的情况。     ,        如果您希望代码仅运行一次，则应使用setTimeout（）而不是

setInterval()

。     ,        用户jQuery的

.one()

函数   说明：将处理程序附加到   元素的事件。处理程序是   每个元素最多执行一次。

$(\"#foo\").one(\"click\",function() {
  alert(\"This will be displayed only once.\");
});

    ,        在不更改执行

setInterval

的源页面的情况下，您唯一的选择似乎是破解

grid.reloadDefaultContent

函数以使其仅运行一次。不看see11如何定义就不可能提供任何建议。