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

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

以下是一个示例代码，展示了如何在 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>

代码说明：

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

运行效果：

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

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