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

运行效果:

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

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

相关推荐
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀3 小时前
html初学者第一天
前端·html
脑袋大大的4 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络5 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way5 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽8 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头8 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github