Vue3项目常用定时器

记录项目中经常会用到的两类定时器的使用方法。一是页面每秒调用依次接口刷新页面数据；二是每天某一时刻固定调用接口刷新页面数据。

1. 每秒调用定时器刷新页面

• setInterval()按照指定的时间间隔，重复执行某个函数或代码段。
• 应用场景
  • 如每秒调接口获取当前数据是否为锁定状态，锁定的数据不能被操作。
• 注意
  • 在项目系统中，直接点页面刷新按钮或浏览器刷新按钮，都会自动清除定时器。但是不关闭弹窗直接点击系统其他菜单不会清除定时器，此时就需要手动清除定时器。
  • onBeforeUnmount生命周期，在组件卸载之后触发，需要在此清除定时器，避免一直调用。

import { reactive， onBeforeUnmount } from 'vue'

const states = reactive({
    timer: '', //定时器
})

setTimer()// 设置定时器

// 设置定时器
const setTimer = () => {
	// 注意: setInterval()第一个参数为方法名的时候，不要加括号;
    states.timer = setInterval(setLockStatus, 1000) // 设置每秒执行一次setLockStatus
}

// 定时器触发后的事件
const setLockStatus = () => {
    console.log('调用了定时器+1')
    // 功能代码
}

// 清除定时器
const clearTimer = () => {
    clearInterval(states.timer)
    console.log('清除了定时器')
}

onBeforeUnmount(() => {
    console.log('组件卸载之后（生命周期钩子）')
    clearTimer()
})

2. 固定时间触发定时器

• 应用场景
  • 常用于大屏看板在某一时间定时调用，获取最新数据。
• 主要思路
  • 首次进入页面时，获取当前时间到指定时间还有多长时间(假设为time1)，设置setTimeout定时器1，定时时间为time1。
  • 定时器1的回调函数是一个setInterval定时器2，设置循环时间为24小时。

const states = reactive({
    timer: '',
})

setupDailyTimer()//设置定时器

const setupDailyTimer = () => {
    console.log('设置了0点定时器！')
    // 获取当前时间
    let now = new Date()
    // 获取今天的剩余时间直到0点
    let midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 15, 25, 10)
    // 获取还有多长时间到指定时间
    let timeToMidnight = midnight - now
    // 设置定时器，在今天0点时触发,设置本日0点触发
    setTimeout(setTimer, timeToMidnight)
}

//24小时循环定时器
const setTimer = () => {
    // 设置下一次定时任务循环定时
    states.timer = setInterval(function () {
        console.log('定时任务！')
        executeAtMidnight()
    }, 86400000 ) // 每天24小时的毫秒数
}

//24小时定时任务触发后执行的事件
const executeAtMidnight = () => {
    console.log('0点了，执行任务！')
    // 这里放置你要定时执行的代码
}

onBeforeUnmount(() => {
    console.log('组件卸载之后（生命周期钩子）')
    clearInterval(states.timer)
})