TS 定时器的使用

vue3 定时器的使用

使用window对象，返回的是number类型

import { defineComponent, onMounted, onUnmounted, reactive, toRefs } from 'vue';
export interface ITime {
    year: string;
    date: string;
    timer: number;
}

export default defineComponent({
    name: 'QTime',
    setup() {
        const timeObj: ITime = reactive({
            year: '2022年4月6日',
            date: '09:58:56',
            timer: 0,
        });

        const addZero = (t: any) => {
            if (t < 10) {
                return `0${t}`;
            }
            return t;
        };

        const dateFormat = (d: any) =>
            `${d.getFullYear()}年${addZero(d.getMonth() + 1)}月${addZero(d.getDate())}日`;

        const timeFormatHM = (d: any, t: any) =>
            addZero(d.getHours()) + t + addZero(d.getMinutes()) + t + addZero(d.getSeconds());

        const initTime = () => {
            // 日期计时器
            timeObj.timer = window.setInterval(() => {
                const d = new Date();
                timeObj.year = dateFormat(d);
                timeObj.date = timeFormatHM(d, ':');
            }, 1000);
        };

        onMounted(() => {
            initTime();
        });

        onUnmounted(() => {
            if (timeObj.timer) {
                window.clearTimeout(timeObj.timer);
                timeObj.timer = 0;
            }
        });

        return {
            ...toRefs(timeObj),
        };
    },
});