写一个定时返回首页的hooks，升级型

版本一：传入多少时间（s），到时间就跳转到首页

import { watchEffect } from 'vue';
import { useRouter } from 'vue-router';
export default function useTimeoutRedirect(timeout) {
  const router = useRouter();
  watchEffect((onInvalidate) => {
    const timeoutId = setTimeout(() => {
      router.push('/');
    }, timeout * 1000);

    onInvalidate(() => {
      clearTimeout(timeoutId);
    });
  });
}

版本二：我现在想我停止了，不让其回去了，因为我在操作

import { watchEffect, ref } from 'vue';
import { useRouter } from 'vue-router';

export default function useTimeoutRedirect(timeout) {
  const router = useRouter();
  const shouldRedirect = ref(true); // 初始化为 true

  watchEffect((onInvalidate) => {
    const timeoutId = setTimeout(() => {
      if (shouldRedirect.value) {
        router.push('/');
      }
    }, timeout * 1000); // timeout in milliseconds

    onInvalidate(() => {
      clearTimeout(timeoutId);
    });
  });

  // 返回一个函数，用于取消自动重定向功能
  function disableRedirect() {
    shouldRedirect.value = false;
  }

  return {
    disableRedirect,
  };
}

版本三：我现在想的是我操作了就从定义的倒计时重新计时

import { watchEffect, ref } from 'vue';
import { useRouter } from 'vue-router';
export default function useTimeoutRedirect(timeout) {
  const router = useRouter();
  const shouldRedirect = ref(true); // 初始化为 true
  const resetTimer = ref(false); // 初始化为 false
  let timeoutId = null;
  function startTimer() {
    timeoutId = setTimeout(() => {
      if (shouldRedirect.value) {
        router.push('/');
      }
    }, timeout * 1000); // timeout in milliseconds
  }
  watchEffect((onInvalidate) => {
    startTimer(); // 初始启动计时器
    onInvalidate(() => {
      clearTimeout(timeoutId);
    });
  });
  // 监听 resetTimer 响应式状态的变化，重新启动计时器
  watchEffect((onInvalidate) => {
    console.log(resetTimer.value, 'resetTimer.value');
    if (resetTimer.value) {
      resetTimer.value = false; // 重置为 false，避免重复触发
      clearTimeout(timeoutId); // 取消之前的计时器
      startTimer(); // 重新启动计时器
    }
    onInvalidate(() => {
      clearTimeout(timeoutId);
    });
  });
  // 返回一个函数，用于在执行某些操作后重新启动计时器
  function restartTimer() {
    resetTimer.value = true;
  }
  // 返回一个函数，用于取消自动重定向功能
  function disableRedirect() {
    shouldRedirect.value = false;
  }
  return {
    restartTimer,
    disableRedirect,
  };
}