如何在拿到接口给出的设备时间戳后展示成本地时间并实时更新?

作者站长头像
站长
· 阅读数 6

目前有个需求是拿到设备传来的时间戳之后展示并实时更新设备时间,目前我的解决方案是这样的

onMounted(async () => {
  await getDeviceList()
  deviceList.forEach((item: any, index: number) => {
    timers[index] = setInterval(() => {
      item.localTime = new Date(
        new Date(item.localTime).getTime() + 1000
      ).toLocaleString()
    }, 1000)
  })
})

const getDeviceList = () => {
  deviceApi
    .getDeviceList()
    .then((res) => {
      const { data } = res
      deviceList = data.map((item: any) => {
        item.localTime = new Date(item.localTime).toLocaleString()
      })
    })
    .catch((err) => {})
}

不过这种方案设备时间会有大概2s的延迟,大佬们有好的解决方案把延迟降低到毫秒、微秒的级别吗?或者提供个思路也可以,前端小菜鸟拜谢!

回复
1个回答
avatar
test
2024-07-02
const getDeviceList = () => {
  deviceApi
    .getDeviceList()
    .then((res) => {
      const { data } = res
      deviceList = data.map((item: any) => {
        const currentTime = Date.now()
        const devTime = Date.parse(item.localTime);
        // 在这里保存当前浏览器时间和设备时间的时间戳差值
        item.localTime = currentTime - devTime
      })
    })
    .catch((err) => {})
}

展示的时候只需要Date.now()减时间戳差值

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容