封装定时器方法

需求：查询的历史数据需要定时3分钟刷新（产品提的要求 照做！！！）

//周期性地执行指定的回调函数，并在组件销毁时清除该定时器，以防止内存泄漏或不必要的回调执行
export const timmingLoadingsTime = (callback, time) => {
  const rollertimer2 = ref(null);
  rollertimer2.value = setInterval(() => {
    if (callback) {
      callback();
    }
  }, time); //30 * 60 * 1000  30分钟
    
  //组件卸载时销毁定时器
  onUnmounted(() => {
    clearInterval(rollertimer2.value);
  });

  return {
    rollertimer2,
  };
};

在需要的文件引用该方法，如下图：

//引入封装方法
import { timmingLoadings, timmingLoadingsTime } from "@/utils/timingLoading.js";

//方式一：
<script setup>
    onMounted(()=>{
        const { rollertimer2 } = timmingLoadingsTime(() => {
            nextTag();//这是我要定时循环的代码 这里放你所需要定时的功能
        }, 5000);
    });
</script>
//方式二：
export default {
    setup(){
        const counter = ref(0);
        onMounted(() => {
            // 调用 timmingLoadingsTime 函数设置定时器
            const { rollertimer2 } = timmingLoadingsTime(() => {
                // 每次定时器触发时执行的逻辑
                counter.value++; // 假设每次递增计数器
            }, 5000); // 设置定时器间隔为 5 秒

            // rollertimer2 可以在组件中被引用和操作
        });

        return {
            counter,
        };
    }
}
//方式三：
<script setup>
    onMounted(()=>{
        //自己使用下来挺正常 因为我没看别人这么用过嘻嘻

标签：定时器,const,rollertimer2,onMounted,5000,timmingLoadingsTime,封装,方法	

From： https://blog.csdn.net/weixin_61001537/article/details/139800247