前端实现定时任务,每天定时更新数据 “ setInterval + new Date()(或moment.js)“

项目场景:

每天定时更新系统数据,前端通过系统时间及setInterval来实现


问题描述

在项目中会遇到一些情况,比如用户不关闭设备,导致设备有时无法同步最新的数据,这里就需要通过特定时间来重新获取最新数据并渲染出来,此时就需要通过定时任务来满足这种需求;


解决方案:

提示:这里通过new Date()计算时间差,通过定时器setInterval来实现指定时间更新数据:

javascript 复制代码
// 切记,登录系统后先跑一下定时任务
timedTask();


/* 定时任务,每天定时获取数据 */
export const timedTask = () => {
  // 获取当前时间
  const now: any = new Date();

  // 这里设置刷新时间为每天固定时间(例如 08:00:00)
  const refreshTime: any = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 8, 0, 0);

  // 计算当前时间距离刷新时间的时间间隔(以毫秒为单位)
  const timeUntilRefresh: any = refreshTime - now;

  // 如果当前时间已经超过刷新时间,则将刷新时间设置为明天的同一时间
  if (timeUntilRefresh < 0) {
    refreshTime.setDate(refreshTime.getDate() + 1);
  }

  // console.log(refreshTime - Date.now(), '定时任务,每天定时获取数据');

  // 设置定时任务,每天固定时间执行刷新数据函数
  const timer = setInterval(() => {
    if ("TODO:需求特定条件") {
    // 时间到处理你的方法
      yourFunction();
       //这里记得清除一下定时器,后面说明原因
      clearInterval(timer);
    }
  }, refreshTime - Date.now());
};




/* 需要处理数据的方法 */
export const yourFunction = () => {
  setTimeout(() => {
    timedTask();
  }, 180000); // 暂定,三分钟后重新开启定时任务
  // ......
  // ......
  // ......
  // 这里处理数据
}

提示:
new Date(year, month, day, hours, minutes, seconds, milliseconds) // 注意:这种方式下,必须传递整型;

各种变量代表的含义是:

  month: 用英文 表示月份名称,从January到December ,缩写也行(Jan...Dec);

  year: 四位数表示的年份

  month: 用整数表示月份,从0(1月)到11(12月)

  day: 表示一个月中的第几天,从1到31, defaults to 1.

  hours: 小时数,从0(午夜)到23(晚11点), defaults to 0.

  minutes: 分钟数,从0到59的整数, defaults to 0.

  seconds: 秒数,从0到59的整数, defaults to 0.

  milliseconds: 毫秒数,为大于等于0的整数, defaults to 0.

  

  

  这里也可以使用使用moment插件将日期转换为毫秒数非常简单。可以使用moment().valueOf()方法来获取当前时间的毫秒数,也可以使用moment(日期).valueOf()方法将给定日期转换为毫秒数。

   // 假设你有一个不同格式的时间字符串

   const timeString = "15-11-2023 16:30:35";

   // 使用 moment 解析这个格式的时间字符串,指定格式

   const time = moment(timeString, "DD-MM-YYYY HH:mm:ss");

   // 然后使用 valueOf 获取这个时间的 Unix 时间戳(毫秒数)

   const timestamp = time.valueOf();

   console.log(timestamp); // 输出时间的毫秒表示

相关链接:
JavaScript简单倒计时效果的实现

相关推荐
AiMan39 分钟前
Perplexity还是不可导出左侧所有对话,只能单条内容,方法不对吗
前端
用户298698530141 小时前
用 Python 自动化把 JavaScript 代码转换为 Word 文档
javascript·python·api
学以智用1 小时前
正则表达式完整参考手册(JavaScript 版,兼容绝大多数语言)
javascript
AiMan1 小时前
千问生成的内容能否下载吗?
前端
北城笑笑1 小时前
Vue 109 ,从零搭建 Vue3 + Electron 工程:生态、安全桥接与打包选型( Vue + Electron )
前端·javascript·vue.js·安全·electron·vue
JarvanMo1 小时前
Flutter 3.50 & Dart 3.14发布,一起看看有哪些变化!
前端
莪_幻尘1 小时前
4 个 3D 游戏,总体积 3.82MB:拆解 Claude 的 one-shot 工程链路
前端·ai编程·three.js
Highcharts.js2 小时前
Highcharts智能数据分析平台Orbit 多语言配置技术文档
java·前端·javascript·highcharts·orbit·智能数据分析·设置文档
草莓熊Lotso2 小时前
【C++ 基于微服务的即时通讯系统】文件存储子服务实战:UUID生成、文件IO封装与全接口单元测试
开发语言·网络·数据库·c++·微服务·架构·单元测试
ABAP-張旺2 小时前
SAP ABAP 实战:SAP GUI上做 HTML 看板报表
前端·html·sap·abap