浏览器长时间未操作执行_页面长时间未操作怎么保持页面继续运行-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45880538/article/details/131779475

该代码示例展示了如何在用户长时间无操作后，通过设置定时器在30分钟后自动刷新页面。当用户有交互（如鼠标移动）时，会重置定时器。这个功能在Vue2项目中被应用，利用事件监听和clearTimeout方法来控制页面的刷新行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器长时间未操作执行 location.reload(), 循环进行

主要代码如下：

     let refreshTimer;
      function startRefreshTimer() {
        refreshTimer = setTimeout(refreshPage, 30 * 60 * 1000); // 30分钟后刷新页面
      }
      function resetRefreshTimer() {
        clearTimeout(refreshTimer);
        startRefreshTimer();
      }
      function refreshPage() {
        clearTimeout(refreshTimer);
        location.reload(); // 刷新页面
        // 重新启动定时器
        //resetRefreshTimer();
      }
      function handleUserInteraction() {
        resetRefreshTimer();
      }
      document.addEventListener("mousemove", handleUserInteraction);
      startRefreshTimer()

Vue2项目使用示例：

mounted() {
    this.noOpertion();
  },
  methods: {
    noOpertion() {
      let refreshTimer;
      function startRefreshTimer() {
        refreshTimer = setTimeout(refreshPage, 30 * 60 * 1000); // 30分钟后刷新页面
      }
      function resetRefreshTimer() {
        clearTimeout(refreshTimer);
        startRefreshTimer();
      }
      function refreshPage() {
        clearTimeout(refreshTimer);
        location.reload(); // 刷新页面
        // 重新启动定时器
        //resetRefreshTimer();
      }
      function handleUserInteraction() {
        resetRefreshTimer();
      }
      document.addEventListener("mousemove", handleUserInteraction);
      startRefreshTimer()
    }
  },