封装定时器方法

最新推荐文章于 2024-06-19 14:45:15 发布

CHENLING302

最新推荐文章于 2024-06-19 14:45:15 发布

阅读量135

点赞数 6

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_61001537/article/details/139800247

版权

需求：查询的历史数据需要定时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(()=>{
        //自己使用下来挺正常 因为我没看别人这么用过嘻嘻🤭~
        timmingLoadingsTime(nextTag, 5000);
    })
</script>