前端倒计时不准的问题

电商网站，团购类网站很多都有都有秒杀这个业务。秒杀自然涉及前端倒计时的问题。前端倒计时许考虑两个问题：

1.由于js是单线程的，也就是阻塞的，定时可定会不准。无论setTimeout()还是setInterval(),都有问题；

2、打开浏览器，然后切换到其他app,再次回到浏览器，这期间js可能停止执行的问题。

本质上来说，只需要两个时间点就可以了：当前时间、秒杀开始时间。有了这两个数据，我们就可以倒计时了。两个时间的差值就是我们要倒计时的时间差，每隔1秒减少1/每隔1毫秒减少1。但是，当前的时间不要用new Date(),这是获取手机的时间，如果用户修改手机的时间，这个会跟随变化的。基于此，当前的时间必须是服务端传过来的。用户每次打开网页，都会传服务器的当前时间。秒杀开始的时间一般是后台配置好的，只要配置了，他就定了。是个不变的量。

解决方法1：

　　以服务器的当前时间为倒计时的当前时间，上面提到需要考虑的那两个问题都没有解决，如果我们实时同步服务器的当前时间，那么这两个问题就都解决了。
如何时时同步呢？最先想到的是，时时调用一个后端的接口，这个接口返回服务器的当前时间。但实际上，我们只需要跟服务器ajax交互就可以了，请求一个服务器不存在的资源，我们从返回中拿返回头，再从这个头中取服务器的当前时间。
这种方法就是不断的同步服务器的事件。
详细代码参考：https://www.zhihu.com/question/28896402
https://zhuanlan.zhihu.com/p/20832837?refer=xiaojue

笔者的代码：

 　　var this_start_time//指定秒杀开始的时间点，服务器传过来的var this_count_down;//时间差：指定秒杀开始时间减去当前时间。可以先不初始化。//校准倒计时的秒数函数function sync(){var xhr = new XMLHttpRequest();xhr.open('get', '/', true);xhr.onreadystatechange = function() {if (xhr.readyState === 3) {var now = xhr.getResponseHeader('Date');var nowTime = new Date(now).valueOf()/1000;//没有毫秒值，我们倒计时的最小单位是秒。有毫秒，不除以1000this_count_down =this_start_time - nowTime;xhr.abort();}};xhr.send(null);}//先对this_count_down初始化sync();if(this_count_down>0){setInterval(function(){sync();this_count_down--;},1000) }else{ alert('倒计时结束 ') }

　　以上代码的欠缺是每次请求服务器，性能不佳。但好处也显而易见，3个用户同时访问页面，他们的倒计时结果基本上一样的，秒杀变得比较公平。当服务器出现问题，请求不到服务器的当前时间，这个代码会有问题，但这不是我们考虑的问题。

解决方法2：

　　还有种解决的办法，就是计算每次倒计时的误差，你能知道第n次你倒计时的应该发生的时间，再跟当前的时间对比，这个误差就在下次倒计时的时候考虑进去。这样可以保证误差不累计。但是对于退出浏览器的行为，这种其实是有问题的。
这种方法是不断校准倒计时的周期，而周期不可能为负数，治标不治本。
详细代码参考：http://www.cnblogs.com/flash3d/archive/2014/05/08/3715600.html

2种方法，第1种更好，不会有任何问题。而第2种，笔者实验的过程中会有点问题。

转载于:https://www.cnblogs.com/xiaochongchong/p/5982004.html

前端倒计时不准的问题相关推荐

获取日期的时间戳问题、前端倒计时不准问题
获取日期的时间戳问题.前端倒计时不准问题 1.获取日期的时间戳问题:new Date(date).getTime(),用该方法来获取时间戳,在ios中返回NaN,安卓机正常原因:date = '20 ...
手机上的web页面的倒计时在手机锁屏后再解锁后发现倒计时不准
手机上的web页面的倒计时在手机锁屏后再解锁后发现倒计时不准手机上的web页面的倒计时在手机锁屏后再解锁后发现倒计时不准的原因是:倒计时的代码在锁屏这段时间不执行.在这里说一下倒计时的实现,在第一次 ...
刷新页面时间不重置前端倒计时_brackets：前端开发工程师必备编辑器之一
Brackets介绍最近开始使用一个新的编辑器,是Adobe开发的开源的项目,与Sublime Text2相比有两点优势: 可以实时预览: 可以快速编辑,在HTML可以编辑CSS和JS代码. Ado ...
html倒计时星期日,Web前端——倒计时效果
一.JavaScript Date对象 getYear() 获取年份,获取年最好用 getFullYear()获取完整格式年份,如2014,一般用这个 getMonth()获取月,从0开始(0~11) ...
前端如何实现精准的倒计时（排除误差、时间偏差）
背景: 前端倒计时的功能在很多业务场景都可以用到,比如活动开始.结束.秒杀倒计时等等等-我最近在处理流程审批及合同签署的项目,也涉及到倒计时功能,但在开发过程中遇到一些麻烦和坑点,下面和大家分享一下 ...
Tp5 实现短信发送及页面倒计时
为什么使用短信: 场景:通常在使用手机号注册时需要发送短信验证码,在修改密码等敏感操作时也需要验证手机号发送短信验证码. 目的:验证用户的身份是否本人平台:百度Apistore数据平台.聚合数据平台 ...
174道 JavaScript 面试题，助你查漏补缺
最近在整理 JavaScript 的时候发现遇到了很多面试中常见的面试题,本部分主要是作者在 Github 等各大论坛收录的 JavaScript 相关知识和一些相关面试题时所做的笔记,分享这份总结给 ...
UpdatePanel和ScriptManager实现免刷新获取数据
这年头,都是ajax+jQuery,后台取出json数据到前台,然后再append到页面上. 新来的大学实习生(估计是老板的亲戚,没面试就插进来的),大学老师只教了拖控件- 现在要实现免刷新的效果,还 ...
JavaScript 面试知识点总结
1.介绍 js 的基本数据类型. js 一共有六种基本数据类型,分别是 Undefined.Null.Boolean.Number.String,还有在 ES6 中新增的 Symbol 和 ES10 ...

前端倒计时不准的问题

前端倒计时不准的问题相关推荐

最新文章

热门文章