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

Make sure a specific setInterval function instance is running only once

本文关键字：运行 一次 实例 确保 函数 setInterval      更新时间：2023-09-26

我正在处理一个div（父级），它有两个其他div（菜单和内容），如下所示：

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

content-div中加载的内容是一个html文件，它有一些javascript函数，例如每5秒重新加载一次内容的自动刷新。

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

页面上有一些链接可以将不同的内容加载到内容分区中。到目前为止还不错，直到我回到"主页"，它具有自动刷新功能。问题是，自动刷新从未停止，现在我点击再次返回主页，该功能运行了两次（或者我更改页面并返回主页的次数），从而启动了会话。我正在使用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函数，使其只运行一次。如果不了解grid是如何定义的，就不可能提供任何建议。

相关文章：