由于客户端时间和服务器端时间不一致,需要将一个项目产品统一改成获取服务器时间,于是写了个全局方法来替换new Date()
1.创建一个getSystemTime文件注册为全局事件,
let nowTime = ''
let flag = true
let IntervalAdd = null
function getSystemTime(){// 触发函数更新时间,为了防止一段时间内重复触发加一个节流阀if(flag) {flag = falsegetSystemTimefun()setTimeout(() => {flag = true},5000)}
// 第一次进来没有时间,判断有时间先返回旧的时间,没有时间去触发获取服务器时间if(nowTime) {return JSON.parse(JSON.stringify(nowTime))}
}function getSystemTimefun() {var xhr = new XMLHttpRequest();//利用服务器接口来获取服务器时间,我这里使用了获取系统版本接口可自行修改xhr.open('get', 'api/auth/system/version');xhr.onreadystatechange = function () {//等待响应完成console.log(this.readyState === this.DONE);if (this.readyState === this.DONE) {//响应完毕后修改时区为东八区为准var serverTime = xhr.getResponseHeader('Date');var offset = new Date().getTimezoneOffset() / 60;// 没次调用时取校准nowTime = new Date(new Date(serverTime).getTime() + offset * 60 * 60 * 1000 + 8 * 60 * 60 * 1000);// 获取当前服务器时间的年份let year = nowTime.getFullYear();// 建立一个定时器,每一秒将时间加一if(IntervalAdd == null) {// 设置一个自加数去校准,每过半小时去自动校准时间let addFrequency = 0IntervalAdd = setInterval(() => {nowTime = new Date(nowTime.getTime() + 1000) console.log(nowTime);if(addFrequency >= 1800) {addFrequency = 0getSystemTimefun()} else {addFrequency++}},1000)}} };xhr.send(); }
export default getSystemTime
2.在app.vue中调用这个方法this.$cu.getSystemTime()第一次获取系统时间将他报错
3.每次调用时返回上一次获取的系统时间,并刷新这个系统时间