通过后台返回的时间戳,显示系统运行时期???

作者站长头像
站长
· 阅读数 5
let startTime = ref()// 起始时间
let timer = ref(null)// 计时器
let currentTime: any = ref('')// 当前时间
onMounted(() => {
  timer.value = setInterval(() => {
    APPRunning(); // 每隔一秒更新当前时间
  }, 1000);
})
onBeforeUnmount(() => {
  clearInterval(timer.value); // 组件卸载前清除定时器
})
// 系统运行时间
function APPRunning() {
  const id = window.localStorage.getItem('RowID');
  api.RunningTime(id).then((RunningTimeData) => {
    const { data: res } = RunningTimeData;
    console.log('运行时间', res);
    const startTimeItem = res.data;
    // 更新系统时间的函数
    currentTime.value = convertTimestampToTime(startTimeItem); // 转换为日、时、分、秒格式
    // 第一次调用更新时间的函数
  });
}
function convertTimestampToTime(timestamp) {
  currentTime.value = new Date(); // 获取当前时间
  const days = Math.floor(timestamp / (1000 * 60 * 60 * 24)); // 计算天数
  const hours = Math.floor((timestamp % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // 计算小时
  const minutes = Math.floor((timestamp % (1000 * 60 * 60)) / (1000 * 60)); // 计算分钟
  const seconds = Math.floor((timestamp % (1000 * 60)) / 1000); // 计算秒数
  // 格式化处理
  const formattedTime = days + '天 ' + hours + '小时 ' + minutes + '分钟 ' + seconds + '秒';
  return formattedTime;
}

此代码会一直调用APPRunning()函数接口,以此来达到持续的更新秒数,请问大佬们,我该怎样优化才可以使APPRunning()调用一次,其余时间都是只更新秒数不会重复调用接口。

回复
1个回答
avatar
test
2024-06-27
let startTime = ref(null) 
let timer = ref(null)
let currentTime: any = ref('')

onMounted(() => {
  // 获取初始时间戳
  getInitialTimestamp();

  // 设置定时器,每秒更新当前时间
  timer.value = setInterval(() => {
    updateCurrentTime();
  }, 1000);
})

onBeforeUnmount(() => {
  clearInterval(timer.value); // 组件卸载前清除定时器
})

// 获取初始时间戳
async function getInitialTimestamp() {
  const id = window.localStorage.getItem('RowID');
  try {
    const RunningTimeData = await api.RunningTime(id);
    const { data: res } = RunningTimeData;
    console.log('运行时间', res);
    const startTimeItem = res.data;
    startTime.value = startTimeItem; // 保存初始时间戳
    updateCurrentTime(); // 第一次调用更新时间的函数
  } catch (error) {
    console.error('获取初始时间戳失败:', error);
  }
}

// 更新当前时间
function updateCurrentTime() {
  if (startTime.value !== null) {
    const timestamp = Date.now() - startTime.value; // 计算已经过去的时间
    currentTime.value = convertTimestampToTime(timestamp); // 转换为日、时、分、秒格式
  }
}

// 时间戳转换函数
function convertTimestampToTime(timestamp) {
  const days = Math.floor(timestamp / (1000 * 60 * 60 * 24)); // 计算天数
  const hours = Math.floor((timestamp % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // 计算小时
  const minutes = Math.floor((timestamp % (1000 * 60 * 60)) / (1000 * 60)); // 计算分钟
  const seconds = Math.floor((timestamp % (1000 * 60)) / 1000); // 计算秒数
  // 格式化处理
  const formattedTime = days + '天 ' + hours + '小时 ' + minutes + '分钟 ' + seconds + '秒';
  return formattedTime;
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容