vue3 uniapp定时器 每天定时触发任务
2023-12-13 14:32:02
最近在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: ''
})
- 设置定时任务
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)
})
接下来就是见证成功的时刻啦,祝我们天天开心、事事顺意~
文章来源:https://blog.csdn.net/qq_34736893/article/details/134970121
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!