确保特定的 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);
    }
});

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

Answer 2

如果您只希望它运行一次，为什么不直接使用“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));
});

哪一种更好取决于您的情况。

Answer 3

如果您希望代码只运行一次，则应该使用 setTimeout() 而不是 setInterval()。

Answer 4

用户 jQuery 的 .one() 函数

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

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

Answer 5

在不更改执行 setInterval 的源页面的情况下，您唯一的选择似乎是破解 grid.reloadDefaultContent 函数以使其仅运行一次。如果不了解grid是如何定义的，就不可能提供任何建议。