vue3实现监听从其他页签回到当前页签重新刷新setInterval

你是否也有遇到过在当前页面设置了定时器,离开当前页签或者切换到其他应用之后重新回来,当前页面上的时间就会出现误差,比理论上的慢几分钟。遇到这种情况第一想法就是监听一下从其他浏览器页签回到当前页签的时机。这边简单记录一下使用document.visibilityState解决这个问题。在 Vue 3 中,你可以通过监听页面的可见性变化来实现从其他页签回到当前页签时重新刷新 setInterval。具体来说,你可以使用 document.visibilityStatevisibilitychange 事件来检测页面的可见性变化。

以下是一个示例代码,展示了如何在 Vue 3 中实现这一功能:

xml 复制代码
<template>
  <div>
    <p>当前时间: {{ currentTime }}</p>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const currentTime = ref(new Date().toLocaleTimeString());
    let intervalId = null;

    const startInterval = () => {
      intervalId = setInterval(() => {
        currentTime.value = new Date().toLocaleTimeString();
      }, 1000);
    };

    const stopInterval = () => {
      if (intervalId) {
        clearInterval(intervalId);
        intervalId = null;
      }
    };

    const handleVisibilityChange = () => {
      if (document.visibilityState === 'visible') {
        // 页面可见,重新启动定时器
        startInterval();
      } else {
        // 页面不可见,停止定时器
        stopInterval();
      }
    };

    onMounted(() => {
      // 初始启动定时器
      startInterval();

      // 监听页面可见性变化
      document.addEventListener('visibilitychange', handleVisibilityChange);
    });

    onUnmounted(() => {
      // 组件卸载时停止定时器并移除事件监听
      stopInterval();
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    });

    return {
      currentTime,
    };
  },
};
</script>

代码说明:

  1. currentTime : 使用 ref 来存储当前时间,并在模板中显示。
  2. startIntervalstopInterval : 分别用于启动和停止 setInterval
  3. handleVisibilityChange: 这是一个事件处理函数,当页面的可见性发生变化时会被调用。如果页面变为可见状态,则重新启动定时器;如果页面变为不可见状态,则停止定时器。
  4. onMounted : 在组件挂载时启动定时器,并监听 visibilitychange 事件。
  5. onUnmounted : 在组件卸载时停止定时器,并移除 visibilitychange 事件监听器。

运行效果:

  • 当用户切换到其他页签时,定时器会停止。
  • 当用户回到当前页签时,定时器会重新启动,并更新当前时间。

这种方式可以有效地节省资源,避免在页面不可见时不必要的计算和渲染。

相关推荐
Mike_jia22 分钟前
uuWAF:开源Web应用防火墙新标杆——从工业级防护到智能防御实战解析
前端
掘金安东尼32 分钟前
Chrome 17 岁了——我们的浏览器简史
前端·javascript·github
袁煦丞32 分钟前
群晖NAS FTP远程文件仓库全球访问:cpolar内网穿透实验室第524个成功挑战
前端·程序员·远程工作
前端小巷子36 分钟前
JS 打造动态表格
前端·javascript·面试
excel1 小时前
从卷积到全连接:用示例理解 CNN 的分层
前端
UNbuff_01 小时前
HTML 各种事件的使用说明书
前端·html
Mr. Cao code1 小时前
探索OpenResty:高性能Web开发利器
linux·运维·服务器·前端·nginx·ubuntu·openresty
li35749 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj9 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel9 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端