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

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

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

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

1.当我们发送ajax请求的时候，可以在ajax响应头中读取到服务器时间（这就不用后台专门写个接口返回给我们前端了）

image.png

2.获取服务器时间

因为我的项目中使用了Vuex,所以我直接设置了一个全局的方法来保存服务器时间

image.png

在Vuex中计算时间差，我使用了moment.js插件

//vuex获取服务器时间  并计算差 
state:{
    serveTime: moment(new Date()),
    differTime: 0, //手机和服务器时间之差
},
mutations:{
    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(){
       return (Array(n).join(0) + num).slice(-n);
    }
  }

以上就是我的解决思路，如果大家有更好的思路，欢迎评论区留言，让大家一起学习，一起进步