页面无活动触发循环视频后，恢复导航及函数循环问题求助

咱们先拆解下当前的核心问题：

• 用innerHTML替换整个content容器内容，会销毁原有DOM元素，重新创建的元素虽带onclick属性，但每次鼠标移动触发resetTimer时，又会调用goActive重新渲染，导致无限循环渲染，同时原来的导航状态（比如home和smartfm的显示状态）也会丢失。
• 频繁的DOM替换操作不仅容易导致事件失效，还会造成页面卡顿。

修复思路 #

不用替换DOM内容，而是把网站内容和视频做成两个同级容器，通过切换display属性控制显示/隐藏。这样既能保留原有DOM结构和事件绑定，又能避免重复渲染的问题。

修改后的代码 #

HTML部分（调整DOM结构）

<div class="container">
  <div id="content" class="content">
    <!-- 网站内容容器，初始显示 -->
    <div id="site-content">
      <!--HOME PAGE-->
      <div id="home" style="text-align:center; display:block">
        <a class="button" href="">One SPIE Button</a><br>
        <a onclick="smart_fm_btn()" class="button" href="#">Smart FM Button</a>
      </div>
      <!--END HOME PAGE-->
      <!--SMART FM PAGE-->
      <div id="smartfm" style="text-align:center; display:none">
        <img class="nav" src="images/nav.jpg" />
        <img class="logo-inner" src="images/logo.jpg" />
        <div class="left">
          <a id="enegyModal" href="#"><img class="nav" src="images/energy.jpg" /></a>
        </div>
        <div class="right">
          <img class="nav" src="images/predictive.jpg" />
        </div>
        <div id="myModal" class="modal">
          <!-- Modal content -->
          <div class="modal-content">
            <span class="close">&times;</span>
            <p>Test the Modal..</p>
          </div>
        </div>
      </div>
      <!--END SMART FM PAGE-->
    </div>
    <!-- 视频容器，初始隐藏 -->
    <div id="video-container" style="display:none">
      <object type='text/html' data='video.html'></object>
    </div>
  </div>
</div>

JavaScript部分（优化状态切换逻辑）

var timeoutID;
// 提前获取DOM元素，避免重复查询
var siteContent = document.getElementById('site-content');
var videoContainer = document.getElementById('video-container');

function setup() {
  // 绑定事件到window，确保视频显示时也能触发操作检测
  window.addEventListener("mousemove", resetTimer, false);
  window.addEventListener("mousedown", resetTimer, false);
  window.addEventListener("keypress", resetTimer, false);
  window.addEventListener("DOMMouseScroll", resetTimer, false);
  window.addEventListener("mousewheel", resetTimer, false);
  window.addEventListener("touchmove", resetTimer, false);
  window.addEventListener("MSPointerMove", resetTimer, false);
  
  startTimer();
}
setup();

function startTimer() {
  // 先清除已有定时器，避免重复设置
  if (timeoutID) clearTimeout(timeoutID);
  timeoutID = window.setTimeout(goInactive, 5000);
}

function resetTimer(e) {
  // 只有当前是视频状态时，才恢复网站内容
  if (videoContainer.style.display !== 'none') {
    goActive();
  }
  // 重置无活动定时器
  startTimer();
}

function goInactive() {
  // 隐藏网站内容，显示视频
  siteContent.style.display = 'none';
  videoContainer.style.display = 'block';
}

function goActive() {
  // 显示网站内容，隐藏视频
  siteContent.style.display = 'block';
  videoContainer.style.display = 'none';
}

// 保留原有的页面切换函数
function smart_fm_btn() {
  var x = document.getElementById("smartfm");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
  var y = document.getElementById("home");
  if (y.style.display === "block") {
    y.style.display = "none";
  } else {
    y.style.display = "block";
  }
}

关键修改点说明 #

1. DOM结构拆分：把网站内容和视频分别放在独立容器中，避免替换整个content的内容，保留了原有DOM元素的事件绑定和导航状态。
2. 定时器优化：startTimer中先清除已有定时器，防止重复设置；resetTimer中增加状态判断，只有从视频状态恢复时才执行显示网站内容的操作，避免不必要的DOM操作。
3. 状态切换简化：goInactive和goActive只切换容器的display属性，操作轻量且不会破坏原有页面结构，彻底解决了无法导航和无限循环的问题。

内容的提问来源于stack exchange，提问作者Jamie Stone