Project scenario:
System data is updated regularly every day, and the front end is implemented through system time and setInterval.
Problem Description
There will be some situations encountered in the project. For example, the user does not turn off the device, causing the device to sometimes be unable to synchronize the latest data. Here, it is necessary to re-obtain the latest data and render it at a specific time. At this time, it is necessary to use scheduled tasks to satisfy this situation. need;
solution:
Tip: Here, new Date() is used to calculate the time difference, and the timer setInterval is used to update the data at the specified time:
// 切记，登录系统后先跑一下定时任务
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); // 暂定，三分钟后重新开启定时任务
// ……
// ……
// ……
// 这里处理数据
}
Tips:
new Date(year, month, day, hours, minutes, seconds, milliseconds) // Note: In this way , an integer must be passed;
The meanings represented by various variables are:
Month: Use English to represent the name of the month, from January to December, the abbreviation is also acceptable (Jan ...Dec);
year: year represented by four digits
month: month expressed as an integer, from 0 (January) to 11 (December)< /span> milliseconds: The number of milliseconds, an integer greater than or equal to 0, defaults to 0. seconds: seconds, from 0 An integer to 59, defaults to 0. minutes: minutes, an integer from 0 to 59, defaults to 0. Hours: Hours, from 0 (midnight) to 23 ( 11pm), defaults to 0.
Day: Indicates the day of the month, from 1 to 31, defaults to 1.
You can also use it heremomentThe plugin is very simple to convert dates to milliseconds. You can use the moment().valueOf() method to get the number of milliseconds of the current time, or you can use the moment(date).valueOf() method to convert a given date into milliseconds.
// Suppose you have a time string in a different format
const timeString = "15-11-2023 16:30:35";
// Use moment to parse the time string in this format, specify the format
const time = moment(timeString, "DD-MM-YYYY HH:mm:ss");< a i=4> // Then use valueOf to get the Unix timestamp (milliseconds) of this time const timestamp = time.valueOf(); console.log (timestamp); // Output time in milliseconds
Related links:
implementation of simple countdown effect in JavaScript
JavaScript + setInterval to realize simple data carousel effect