一个有趣的倒计时问题

最新推荐文章于 2023-04-07 10:51:28 发布

weixin_30325971

最新推荐文章于 2023-04-07 10:51:28 发布

阅读量162

点赞数

CC 4.0 BY-SA版权

文章标签：后端前端 ViewUI

原文链接：http://www.cnblogs.com/mzsg/p/5435931.html

背景：
某项目前端使用HTML5，后端提供HTTP接口，某个功能是前端显示合约倒计时（合约生效日期及结束日期配置在DB），允许少量误差

方案1：
后端提供的接口只返回合约结束时间，前端直接将后端返回的结束时间减去客户端时间即为倒计时

陷阱：客户端的时间用户是可以随意改的，甚至用户的时区都有可能不同，所以这种方法统计出来的倒计时必然是不能得到保证的

方案2：

后端提供的接口只返回由后端计算出来的倒计时（虽然后端机器可能有多台，但跟用方案1比毕竟机器可控)，前端直接使用该倒计时，使用setInterval()函数

可是运行了一段时间之后，时间却不准了，为什么呢？原来：js实质是单线程的，经过一段时间后，倒计时时间差异会变大而慢慢变得不准。如果遇上机器休眠那差距就更大了。

方案3：
后端返回结束时间+后端计算出来的倒计时，前端也计算倒计时与服务端算出来的作为偏移量，每个循环取前端取结束时间+偏移量-当前时间，算法如下

//endTime和leftTimeMillions来自后端，分别代表结束时间与剩余时间毫秒数
var currentTime = new Date().getTime();
//前后端时间偏差量
var offset = endTime - currentTime - leftTimeMillions;
//倒计时
var leftTimeResult = endTime - currentTime + offset;

转载于:https://www.cnblogs.com/mzsg/p/5435931.html