确保特定的 setInterval 函数实例只运行一次答案

【问题标题】：Make sure a specific setInterval function instance is running only once确保特定的 setInterval 函数实例只运行一次
【发布时间】：2011-09-05 00:13:58
【问题描述】：

我正在开发一个 div（父级），该 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 的实例，并在我回家时重新启动它。

【问题讨论】：

“独立于用户更改页面/div 内容”是什么意思？目前尚不清楚这与计时器问题有什么关系。
grid 是如何定义的？它是全局的还是闭包内的？
@Pointy：我认为“我没有选择使用setTimeout 代替setInterval”。但我可能错了……

标签： javascript jquery setinterval

【解决方案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);
    }
});

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

【讨论】：

【解决方案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));
});

哪个更好取决于你的情况。

【讨论】：

如果我正确理解了他的问题，javascript 会通过 ajax 加载添加到页面中。他确实希望它作为一个间隔工作，但不希望每次有人在同一会话期间打开带有 ajax 负载的选项卡/页面时重复启动它。
是的 Niklas，我最终想通了。谢谢:-)
不幸的是，OP 声明：“独立于用户更改页面/div 内容”
@Ates Goral 是的，他确实这么说，但我不知道这是什么意思 :-)
我也没有，真的。我刚刚删除了那句话。我会在一秒钟内尝试这个解决方案。谢谢！

【解决方案3】：

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

【讨论】：

【解决方案4】：

用户jQuery的.one()函数

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

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

【讨论】：

【解决方案5】：

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

【讨论】：