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 事件监听器。

运行效果:

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

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

相关推荐
砖头拍死你7 分钟前
51单片机如何使用printf打印unsigned long的那些事
java·前端·51单片机
用户15129054522015 分钟前
css —pointer-events属性_css pointer-events
前端
帅夫帅夫17 分钟前
Axios 入门指南:从基础用法到实战技巧
前端
云边散步18 分钟前
《校园生活平台从 0 到 1 的搭建》第四篇:微信授权登录前端
前端·javascript·后端
讨厌吃蛋黄酥20 分钟前
React样式冲突终结者:CSS模块化+Vite全链路实战指南🔥
前端·javascript·react.js
噔噔42821 分钟前
使用webworker优化大文件生成hash的几种方式
前端
星眠23 分钟前
学习低代码编辑器第四天
javascript·面试
Hilaku28 分钟前
原生<dialog>元素:别再自己手写Modal弹窗了!
前端·javascript·html
GISer_Jing1 小时前
Coze:字节跳动AI开发平台功能和架构解析
javascript·人工智能·架构·开源
NeverSettle1105741 小时前
手把手教你用nodejs + vue3 实现大文件上传、秒传、断点续传
前端·面试