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的定义方式，就无法提供任何建议。

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

5 个答案: