背景:业务部门提出了一个需求,想要在某个手机端页面加入倒计时,提醒用户处理事项,于是我快速开发了一个倒计时的功能, 提测,测试完毕后就提出了问题:修改了手机系统时间,倒计时功能异常。原因是我在代码中使用了new Date() ,导致手机系统时间改变后,该数据也发送了变化。于是又快速修改了一版,采用网络时间。具体做法就是从请求的返回头中拿时间,认为该时间即为正确时间。该页面为某模块的详情页面(可理解为商品详情),页面初始化时会根据id查询详情信息。具体做法如下:
首先处理网络请求的返回结果,在返回结果中加入请求头中的时间
httpGetWithTime = (url) => {
let header = getHeader();
return new Promise((resolve, reject) => {
cGetData(url, {
method: 'GET',
headers: header,
// body:{},
}).then((response) => {
if (response.ok) {
let { map } = response.headers;
// let result =response.json() ;
response.json().then(res => {
if (map && map.date) {
resolve({ ...res, netWorkTime: map.date })
} else {
resolve({ ...res })
}
});
} else {
reject("接口异常");
}
})
.catch((error) => {
reject(error);
})
})
}
页面初始化后,记下网络请求结果中的网络时间 netWorkTime ,和此时的时间 currentTime
countDown = () => {
let lastTime = new Number(dateFormat(this.state.prescription.pushTime))// 接口返回的活动的开始时间
let crashTime = lastTime + 24 * 60 * 60 * 1000
// let diffTime='';
let now = '';
if (this.state.netWorkTime) {
now = new Date(this.state.netWorkTime).getTime();
} else {
now = new Date().getTime();
}
// currentTime 为进入页面的当前时间 =new Date()
let diffTime = crashTime - (now + new Date().getTime() - this.state.currentTime);
if (diffTime <= 0) {
this.setState({
countime: ''
})
} else {
this.setState({
countime: this.formatDate(diffTime)
})
}
setInterval(() => {
if (diffTime >= 1000) {
diffTime -= 1000;
// timeObj.innerHTML = formatDate(diffTime);
this.setState({
countime: this.formatDate(diffTime)
})
} else {
this.setState({
countime: ''
})
}
}, 1000)
}
formatDate(maxtime) {
var d = Math.floor(maxtime / (1000 * 60 * 60 * 24));
var h = Math.floor(maxtime / (1000 * 3600)) - (d * 24);
var m = Math.floor(maxtime / (1000 * 60)) - (d * 24 * 60) - (h * 60);
var s = Math.floor(maxtime / (1000)) - (d * 24 * 60 * 60) - (h * 60 * 60) - (m * 60);
var hour = (d * 24) + h, minutes = m, seconds = s;
if (hour > 100) {
hour = 99
}
if (hour < 10) {
hour = "0" + hour;
}
if (m < 10) {
minutes = "0" + minutes
} if (s < 10) {
seconds = "0" + seconds;
}
return hour + ":" + minutes + ":" + seconds;
}