vue 环境下多个定时器的创建与暂停的统一封装

无光末阳2025-10-16 16:40

你也许遇到过这样的需求有一个页面有多个展示内容（大屏页面），每个展示内容需要定时刷新，并且每个展示内容需要不同的刷新时间。这个时候你就需要弄很多变量来控制定时器，然后切换出去页面的时候还要取消定时器，简直就是噩梦了。所以我就写了这个定时器管理器，你只需要传入一个对象，对象中包含定时器名称，定时器回调函数，定时器间隔，就可以自动管理定时器了。

javascript 复制代码

export const useTimers = () => {
  // 存储所有定时器
  const timers = {};
  /**
   * 创建并启动定时器
   * @param {string} key - 定时器名称，用于后续管理
   * @param {Function} callback - 定时执行的回调函数
   * @param {number} interval - 执行间隔(毫秒)
   * @returns {number} 定时器ID
   */
  const startInterval = (key, callback, interval) => {
    // 先清除同名定时器，避免重复
    if (timers[key]) clearInterval(timers[key]);
    // 立即执行一次
    callback();
    // 创建新定时器
    timers[key] = setInterval(callback, interval);
    return timers[key];
  };

  /**
   * 停止并清除定时器
   * @param {string} [key] - 定时器名称，不传则清除所有定时器
   */
  const stopInterval = (key) => {
    if (key) {
      // 清除指定定时器
      if (timers[key]) {
        clearInterval(timers[key]);
        timers[key] = null;
      }
    } else {
      // 清除所有定时器
      Object.keys(timers).forEach((k) => {
        if (timers[k]) {
          clearInterval(timers[k]);
          timers[k] = null;
        }
      });
    }
  };

  // 组件卸载时自动清理所有定时器
  onBeforeUnmount(() => stopInterval());
  // 如使用keep-alive，组件失活时也清理定时器
  onDeactivated(() => stopInterval());

  return { startInterval, stopInterval, timers };
};

使用示例

javascript 复制代码

const user = {
    userList: {
        backFun: getuserList,
        time: 10000
    },
    userInfo: {
        backFun: getuserInfo,
        time: 5000
    }
}

import { useTimers } from './timeConfig';
const { startInterval, stopInterval } = useTimers();
const getuserList = () => {
    return []
}
const getuserInfo = () => {
    return {}
}

onMounted(() => {
    Object.keys(user).forEach(key => {
        startInterval(key, user[key].backFun, user[key].time);
    });
})