js获取服务器时间,实现抢购倒计时

商品抢购倒计时,涉及到一个问题,就是时间的准确性,如果使用本地手机或者电脑的时间,就会存在时间不准以及误差,并且还有时区问题

解决方法: 使用服务器的时间

困难:但是我们不能每秒钟请求一次服务器,这肯定是不可取的,访问量大了之后服务会崩溃的
我的思路是这样的: 发送ajax请求,从响应头获取服务器时间,然后和本地时间进行对比,计算两者之差,然后让本地之间加上时间差,就是准确的时间了

1.当我们发送ajax请求的时候,可以在ajax响应头中读取到服务器时间(这就不用后台专门写个接口返回给我们前端了)
setServiceTime(state, data) { let phoneTime = moment() //手机/浏览器 当前时间 state.serveTime = moment(data) //服务器时间 state.differTime = state.serveTime.diff(phoneTime , 'seconds') //当前时间和服务器时间之差
4.在商品倒计时页面处理时间
//页面部分
<template>
  <div>距离活动开始时间还剩 {{waitTime}} </div>
</template>
//js部分
  data(){
    return {
      currentTime:moment(),//当前时间
      startTime:'2020-12-30 15:51:00' //活动开始时间
       waitTime:'' //活动倒计时时间
  computed:{
        surplusTime() { //服务器和本地时间之差
            return this.$store.state.differTime
  mounted(){
      this.initTime()
  methods:{
   // 时间计时器
    initTime(){
      this.getNowTime()
       this.timer = setInterval(()=>{
           this.getNowTime()
        },1000)
   // 获取当前时间
    getNowTime() {
        let nowSeconds = moment().unix() * 1000  //把当前时间转化为秒
           //真实时间 = 当前本地时间 + (服务器时间-当前时间只差)
        this. currentTime= moment(nowSeconds).add(this.surplusTime,'seconds').format('YYYY-MM-DD HH:mm:ss')
   // 抢购开始时间倒计时
    computedTime(){
         let du = moment.duration(moment(this.startTime) - moment(this.currentTime), 'ms'), //距离开始抢购剩余时分秒
             hours = du.get('hours'),
             mins = du.get('minutes'),
              ss = du.get('seconds');
         this.waitTime = PrefixInteger(hours, 2) + ':' + PrefixInteger(mins, 2) + ':' + PrefixInteger(ss, 2)
   //时间缺0 补0
    PrefixInteger(){