vue3 uniapp定时器 每天定时触发任务

最近在uniapp中遇到了一个定时器的功能,需要每天定时00:00:00触发接口请求,用到了timeOutTimer和intervalTimer,结合实例来讲一下实现步骤:
首先了解一下这两个方法的含义

  • setTimeout:用于在一段时间后执行一次函数。
  • setInterval:用于重复性地执行一个函数,按照指定的时间间隔重复调用

具体实现方法如下:
1.引入

import {onLoad,onShow,onUnload} from "@dcloudio/uni-app"
// 时间转换插件
import moment from 'moment';

2.定义变量

// 定时任务配置
	const config = ref({
		time: '00:00:00', // 每天几点执行
		interval: 1, // 隔几天执行一次
		intervalTimer: '',
		timeOutTimer: ''
	})
  1. 设置定时任务
	onShow((options) => {
		//定时任务
		setTimedTask();
	})

	// 设置定时任务
	function setTimedTask() {
		// 获取当前时间
		let endTime = `${moment().format("YYYY-MM-DD")} ${config.value.time}`;
		// 获取今天定时执行的时间戳
		let end = moment(endTime).unix()*1000;
		// 获取当前时间戳
		let start = moment().unix()*1000;
		// 如果执行时间已经过了今天,就让把执行时间设到明天的按时执行的时间
		if(end <= start){
			end += 24 * 60 * 60 * 1000;
		}
		//获取距离多少时间戳后执行
		let downCount = end - start;
		config.value.timeOutTimer = setTimeout(() => {
			setTimer();
		}, downCount);
	}
	// 设置定时器
	function setTimer() { 
		console.log('进入定时器')
		// 这里是将在你设置的时间点执行你的业务函数
			webSocketAction()
		// 每隔多少天再执行一次,这里设置的是24小时
		const intTime = config.value.interval * 24 * 60 * 60 * 1000
		config.value.intervalTimer = setInterval(() => {
			webSocketAction();
		}, intTime);
	}
	function webSocketAction() {
		console.log("开始执行。。。。。。。");
		// 这里是要触发的任务
		// ......
	}

4.离开页面时销毁定时器

// 离开页面时销毁定时器
	onUnload(() => {
		// 清除任务定时器
		clearInterval(config.value.intervalTimer)
		// 清除定时器timeout
		clearTimeout(config.value.timeOutTimer)
	})

接下来就是见证成功的时刻啦,祝我们天天开心、事事顺意~

你可能感兴趣的:(uni-app)