实时对比服务器时间间隔

[heycn]

解决当前系统时间与服务器时间对比不准确问题

背景

有一个需求，需要对服务器某个时间进行对比，并在页面实时展示，但是当用户修改系统时间时，就会导致结果不准确

解决

需要服务端返回 对比时间 和 服务器时间，使用 moment 进行对比，自定义 secondToTime 和 useInterval 用于格式化时间和计时

import React, { useEffect, useState, useRef } from 'react'
import moment from 'moment'

const secondToTime = second => {
  if (!second) {
    return 0 + _t('分钟')
  } else if (second < 60) {
    return second + _t('秒')
  } else if (second >= 60 && second < 3600) {
    let sec = second % 60
    let min = (second - sec) / 60
    if (sec == 0) {
      return min + _t('分钟')
    } else {
      return _t('{{min}}分{{sec}}秒', {min, sec})
    }
  } else if (second >= 3600) {
    let min = Math.floor(second / 60)
    let hour = Math.floor(min / 60)
    min = min % 60
    if (min == 0) {
      return hour + _t('小时')
    }
    return hour + _t('小时') + min + _t('分钟')
  }
}

const useInterval = (callback, delay) => {
  const savedCallback = useRef()

  useEffect(() => {
    savedCallback.current = callback
  }, [callback])

  useEffect(() => {
    function tick() {
      savedCallback.current()
    }
    if (delay !== null) {
      let id = setInterval(tick, delay)
      return () => clearInterval(id)
    }
  }, [delay])
}

const App = ({flagTime, serverTime})=> {
  const [flagTime] = React.useState(flagTime)
  const [serverTime, setServerTime] = React.useState(serverTime)

  useInterval(() => {
    let n = 0
    setServerTime(moment(serverTime).add(n+=1, 's'))
  }, 1000)

  const runderTime = () => {
    if (flagTime && serverTime) {
      let diff = moment(serverTime).diff(moment(), 's')
      if (diff > 30 || diff < -30) {
        return secondToTime(moment(serverTime).diff(flagTime, 's'))
      } else {
        return secondToTime(moment().diff(flagTime, 's'))
      }
    } else {
      return ''
    }
  }

  return (
    <div>{runderTime}</div>
  )
}

这样子就可以尽可能地实时对比时间了