Vue3中实现多个独立可复用定时器实例的方案咨询

嗨，我明白你现在的困扰了——原来的定时器是全局单例的，多个组件共用的话，一个组件启动或修改定时器，其他组件的状态也会跟着变，完全做不到独立控制对吧？别担心，咱们只需要把定时器的逻辑封装成一个可复用的工厂函数，就能让每个组件都拥有属于自己的独立定时器实例啦！

先说说问题根源：你之前的代码里，state是一个全局的响应式对象，所有导入这个模块的组件拿到的都是同一个引用，自然会互相干扰。而工厂函数的思路就是每次调用都生成全新的响应式状态和操作方法，彻底隔离各个定时器的状态。

接下来是具体的改造代码：

import { reactive, toRefs } from 'vue';

interface State {
  timeToRetry: number;
  timer: ReturnType<typeof setTimeout> | null;
}

// 工厂函数：每次调用都创建一个独立的定时器实例
export function createTimer() {
  const state: State = reactive({
    timeToRetry: 0,
    timer: null,
  });

  const stopTimer = () => {
    state.timeToRetry = 0;
    if (state.timer) {
      clearInterval(state.timer); // 这里要注意：你原代码用了setInterval，清理时要对应用clearInterval哦
      state.timer = null;
    }
  };

  const startTimer = (seconds: number) => {
    stopTimer();
    state.timeToRetry = seconds;
    state.timer = setInterval(() => {
      if (state.timeToRetry > 0) {
        state.timeToRetry--;
      } else {
        stopTimer();
      }
    }, 1000);
  };

  return {
    ...toRefs(state),
    startTimer,
    stopTimer,
  };
}

你看，现在每次调用createTimer()，都会生成一个全新的state响应式对象，以及专属的startTimer和stopTimer方法——完全和其他调用生成的实例隔离开，不会互相影响。

给你举个组件里的使用例子，比如两个不同的组件：
组件A示例：

<template>
  <div>
    <p>组件A定时器：{{ timeToRetry }}秒</p>
    <button @click="startTimer(10)">启动10秒定时器</button>
    <button @click="stopTimer">停止</button>
  </div>
</template>

<script setup lang="ts">
import { createTimer } from './timer';

// 创建组件A专属的定时器实例
const { timeToRetry, startTimer, stopTimer } = createTimer();
</script>

组件B示例：

<template>
  <div>
    <p>组件B定时器：{{ timeToRetry }}秒</p>
    <button @click="startTimer(5)">启动5秒定时器</button>
    <button @click="stopTimer">停止</button>
  </div>
</template>

<script setup lang="ts">
import { createTimer } from './timer';

// 创建组件B专属的定时器实例
const { timeToRetry, startTimer, stopTimer } = createTimer();
</script>

这样操作组件A的定时器时，组件B的定时器完全不受影响，完美实现独立控制！

另外提个小细节：你原代码里用了setInterval但清理时写的是clearTimeout，这是个小bug，我在改造后的代码里已经修正为clearInterval了，要注意保持定时器创建和清理方法的一致性哦～

备注：内容来源于stack exchange，提问作者allweek