js计时器每日零点调用，设置闹钟原理

云只上

已于 2023-04-23 16:05:41 修改

阅读量830

点赞数

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

于 2023-04-23 16:03:30 首次发布

本文链接：https://blog.csdn.net/m0_47483157/article/details/130323844

版权

文章描述了一个前端实现大屏数据每天凌晨自动刷新的逻辑，通过计算明天零点加上10秒的时间戳与当前时间戳的差值来设置计时器倒计时。在组件挂载时启动计时器，并在离开界面时清除，额外的10秒是为了应对后端数据生成可能存在的延迟问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端大屏有个需求逻辑，每天的凌时刷新一次数据，，于是就想到了使用计时器，拿到明天零点的时间，获取当前的时间，两个时间戳相减获取的毫秒作为计时器的倒计时。

// 计时器 = 明天凌晨 + 10s刷新 
const SetInterval = () => {
	const Time  = Number(new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate() + 1, 0, 0, 10)) - Number(new Date())//明天零点 + 10s 时间戳 - 当前时间的时间戳 = 计时器倒计时毫秒
	timer.value = setInterval(() => {
		getPlantFactorData();
	}, Time)
}

在进入界面后立即调用函数，每次进入界面都会重新刷新倒计时的时间。

1.写在onMounted调用函数SetInterval()，

2.记得离开界面后清除计时器window.clearInterval(timer.value)

3.加10s刷新是怕后端数据生成延迟问题，可以跟后端讨论