本文属于转载,转载地址:http://hi.baidu.com/flondon/item/04e89ece8f5ecf0d0ad93a98
现在有很多网站都在做秒杀商品,而这其中有一个很重要的环节就是倒计时。
关于倒计时,有下面几点需要注意:
1.应该使用服务器时间而不是本地时间(本地时间存在时区不同、用户自行设置等问题)。
2.要考虑网络传输的耗时。
3.获取时间时可直接从AJAX的响应头中读取(通过getResponseHeader('Date')来获得),服务器端不需要专门写时间生成脚本。
过程分析:
1.从服务器读到一个时间戳之后便开始计时,不考虑网络传输的耗时:
图中的各项标注分别是(上面的时间线采用标准时间,与服务器和页面的时间均无关):
start——页面项服务器发起AJAX请求时的时间。
www_start——服务器响应页面的请求并返回时间戳给页面的时间。
pc_start——页面接受到服务器返回的时间戳并开始计时的时间。
www_end——服务器倒计时结束的时间。
pc_end——页面倒计时结束的时间,同时也是用户在倒计时结束那一刻点击按钮的时间。
end——服务器接收到用户点击信息的时间。
可以看出,即使在倒计时结束的那一刻(也就是秒杀开始那一刻)用户就立即点击鼠标,也会比实际开始抢拍的时间(www_end,即服务器
倒计时结束的时间)晚一些(可以很容易的看出,这个时间差正好等于pc_start - start,也就是AJAX从开始发送到接收到响应信息的耗
时)。如果有些内行在页面倒计时结束前用脚本发送请求,那么其他用户可就亏大了。所以,我们要解决掉这个时间误差的问题。
2.为了解决时间误差的问题,我们将把页面倒计时的时间缩短一小截(由上面的分析可以得出,这一小截正好等于pc_start - start),使得
用户在倒计时结束时发送给服务器的抢拍信息正好在服务器倒计时结束时被接收到:
图中的各项标注与Pic.1中相同(时间线采用标准时间,与服务器和页面的时间均无关),新增的两项标注的含义如下:
old_pc_end——在未对网络传输耗时进行处理的情况下pc_end的时间。
old_end——在未对网络传输耗时进行处理的情况下end的时间。
由Pic.2可见,网络传输耗时造成的时间误差已经完全被弥补了,弥补的方法是“将倒计时结束的时间提前pc_start - start”。但是解决了网络传
输耗时造成的误差问题,还有用户电脑时间和服务器时间不相同的问题,下面我们继续讨论。
3.用户的电脑时间和服务器时间一定是有差异的,甚至差几个时区,怎么解决这个问题呢?方法的要点如下:
A. 当页面接收到服务器返回的时间戳www_t时,立即开始计时。
B. 当页面接收到服务器返回的时间戳www_t时,立即计算本地时间和服务器返回的时间戳的时间差t=new Date().getTime() - www_t*1000。
C. 仍然使用new Date().getTime()来计时,而不是使用setInterval()函数(计时器很不稳定,误差也很大),但时间的显示与程序的逻辑必须
基于本地时间和上一步(B中)求得的时间偏差t。
结论要点:
页面从接收到服务器响应的时间戳开始计时,计时的时长应减掉AJAX从发送到接收整个过程的耗时,计时过程则使用本地时间来实现(本
地时间+时间偏差)。
有任何疑问或建议请留言,谢谢!
原作者:微米博客
分享到:
相关推荐
在一些购物商城经常看到有很多商品做秒杀活动,也就是倒计时,本篇文章给大家介绍Javascript实现商品秒杀倒计时(时间与服务器时间同步),需要的朋友可以了解下
javascript 实现网页 倒计时 代码
本文实例为大家分享了vue实现秒杀倒计时组件的具体代码,供大家参考,具体内容如下 下面是使用Vue实现秒杀倒计时组件 1.请求服务器获取这一刻的服务器时间(统一以服务器时间为基准) 2.获取用户当前电脑时间与...
利用javascript技术实现时间倒计时
javascript时间排序算法实现活动秒杀倒计时效果_.docx
javascript实现倒计时
javascript实现简单倒计时效果 本文实例为大家分享了javascript实现倒计时效果的具体代码,供大家参考,具体内容如下 实现思路: 1、页面创建好天、小时、分、秒的标签元素,定义好样式 2、js获取天、小时、分、...
主要为大家详细介绍了JavaScript实现秒杀时钟倒计时,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
JavaScript实现倒计时
ASP.NET实现从后端获取时间,前段javascript无刷新倒计时。
主要介绍了C#结合JavaScript实现秒杀倒计时的方法,涉及C#结合javascript操作时间的技巧,非常具有实用价值,需要的朋友可以参考下
简单的javascript程序实现网页倒计时效果。不含库,不需要调用其他文件。
javascript 倒计时 实例 css jquery 一个jquery倒计时程序。
无论是招聘网站、商品秒杀还是新年倒计时等,展示网页倒计时的需求都很常见,本示例代码可以帮助开发人员快速实现和调整倒计时效果,从而提高用户体验和网站吸引力。 该代码的使用场景比较灵活,可以在电商、招聘、...
javascript页面倒计时javascript页面倒计时javascript页面倒计时javascript页面倒计时
输入小于一小时的任意时间,点击按钮后,系统会对您输入的时间进行倒计时。
JS倒计时