前端开发的JS实现活动精确倒计时为什么不一样

二叶草 2020年2月8日13:59:18IT专区评论阅读模式

前端开发的JS实现活动精确倒计时为什么不一样

抢购倒计时

这在开发设计中,就是说前端开发网页页面倒数计时的作用,像那样的事例在许多情景中都是应用过,非常是商城系统的企业网站数最多,也有玩的分凉水起的一元购,实际上这一我不会提议大伙儿去旅游一元购,终究是坑骗人的。另外比如活动运营开始倒计时以及活动结束倒计时,又比如在购物网站的秒杀商品的倒计时,抢购商品的倒计时,比如还有我们企鹅QQ春节抢红包倒计时等等……. 都会涉及倒计时功能,一是商家为了推广自己的产品,同时也刺激消费者的不理性消费。但是在开发过程中会遇到一些麻烦和坑点。

最大的坑点就是,为什么刚一到时间,所有的宝贝全部抢完了呢?比较细心的小伙伴会发现,在两个手机【现在的土豪比较多,2个手机的常见】在不同时间点打开一个相同的活动,但是显示的开抢倒计时却是不一样的,有的误差甚至可以达到几分钟,这就造成了某些忠实的粉丝在活动还未显示开始抢的时候,就已被抢购一空了。为什么误差会这么大呢?又是什么造成的呢?

关于这个问题,前端开发的同学一般会认为是:倒计时是因为读取了客户端时间而造成时间不一致,因为客户端时间和服务端之间的时间是有一定的误差,我们应该去读取服务器时间。

这是正确的,倒计时不应该读取客户端时间,因为客户端时间是每个用户都可以随时调整,会造成不一致,应读取服务器返回时间。但事实上,做了这一步还不能够满足要求,因为页面运行时间长了,新开的页面和之前打开的页面还是会一样存在误差。

下面这个团购网站也存在这个问题:

前端开发的JS实现活动精确倒计时为什么不一样

前端开发的JS实现活动精确倒计时为什么不一样

前端开发的JS实现活动精确倒计时为什么不一样

这是在2个浏览器中比较的时间:差距有这么大

造成这种误差的原因有下面几种可能:

第1:没有考虑到js冻结运行耗费时间;

第2: 没有充分考虑到页面渲染和函数运行累积时间;

第3:其他代码逻辑问题;

总结下:虽然要做到100%完美的精确度倒计时很难,但是我们还是可以优化优化相对准确的。

因此在倒计时功能开发中,需要考虑以下几点:

1. 要了解好js单线程工作原理;

2. 了解服务器系统时间从后台传送到前端的流程;

3. 了解前端渲染和线程阻塞造成的时间误差;

虽然春运购票已经开始了,但是小编还没来得及去研究如何快速抢票,不知道那个抢票时间是否误差也很大呢?有兴趣的小伙伴可以去验证下。因为小编的假期还是很遥远。相信总有一张属于我的车票,只是时间问题。祝大家在抢购中,顺顺利利,倒计时来了,都可以快速抢到自己想要东东。

本文来源于:前端开发的JS实现活动精确倒计时为什么不一样-变化吧门户
特别声明:以上文章内容仅代表作者本人观点,不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。

  • 赞助本站
  • 微信扫一扫
  • weinxin
  • 加入Q群
  • QQ扫一扫
  • weinxin
二叶草

发表评论