现在有很多网站都在做秒杀商品,而这其中有一个很重要的环节就是倒计时。

关于倒计时,有下面几点需要注意:

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小技巧:同步服务器时间、同步倒计时

之前在网上看到有人提问,如何在页面上同步显示服务器的时间,其实实现方法有几种,可能一般人立马就想到可以使用Ajax每隔一秒去请求服务器,然后将服务器获取到时间显示在页面上,这样虽然能够实现,但存在一个很大的问题,那就是每隔一秒去请求服务器,这样如果用户多了,服务器就会崩溃(内存占用率会很大),所以在我看来,这种方法不可行,我这里给出一种解决方案,能够实现同步服务器时间、同步倒计时,却不占用服务器太多资源,下面我给写实现的思路

网站服务器时间秒杀,Javascript实现商品秒杀倒计时(时间与服务器时间同步)...相关推荐

  1. Javascript实现商品秒杀倒计时(时间与服务器时间同步)

    在一些购物商城经常看到有很多商品做秒杀活动,也就是倒计时,本篇文章给大家介绍Javascript实现商品秒杀倒计时(时间与服务器时间同步),需要的朋友可以了解下 现在有很多网站都在做秒杀商品,而这其中 ...

  2. 秒杀商品展示及商品秒杀

    目录 一.登录方式调整 二.秒杀商品展示&秒杀商品详情&商品秒杀功能 1.生成秒杀订单 2.绑定秒杀商品 3.查看看秒商品 4.订单秒杀 ① 移除seata相关 ② 生成秒杀订单 ③ ...

  3. 微服务项目【秒杀商品展示及商品秒杀】

    登录方式调整 第1步:从zmall-common的pom.xml中移除spring-session-data-redis依赖 注意: 1)本次不采用spring-session方式,改用redis直接 ...

  4. java秒杀系统 代码大全_Java秒杀系统:商品秒杀代码实战

    内容: "商品秒杀"功能模块是建立在"商品详情"功能模块的基础之上,对于这一功能模块而言,其主要的核心流程在于:前端发起抢购请求,该请求将携带着一些请求数据:待 ...

  5. 秒杀项目之秒杀商品展示及商品秒杀

    目录 前言 一.登录方式调整 二.生成秒杀订单 2.1 绑定秒杀商品 2.2 查看秒杀商品 2.3 订单秒杀 2.3.1 移除seata相关(方便测压) 2.3.2 生成秒杀订单 2.3.3 前端页面 ...

  6. 电商项目实战之商品秒杀

    电商项目实战之商品秒杀 定时任务 corn表达式 实现方式 基于注解 基于接口 实战 秒杀系统 秒杀系统关注问题 秒杀架构设计 商品上架 获取当前秒杀商品 获取当前商品的秒杀信息 秒杀最终处理 参考链 ...

  7. HTML+CSS+JavaScript实现的品优购项目源代码,包含首页、登录页面、注册页面、商品秒杀页、商品推文页、商品抢购页等

    本次项目一共实现了7个界面,包括首页.登录页面.注册页面.商品秒杀页.商品推文页.商品抢购页.商品详情页等界面. 完整代码下载地址:HTML+CSS+JavaScript实现的品优购项目源代码 项目展 ...

  8. php商品秒杀时间代码,Thinkphp5+Redis实现商品秒杀代码实例讲解

    环境:wamp,redis 要求:安装WAMP,Redis,以及为PHP安装Redis扩展 秒杀功能大致思路:获取缓存列表的长度,如果长度(llen)等于0,就停止秒杀,即秒杀失败,如果长度大于0,则 ...

  9. 实现商品秒杀成功后【前端实时更新待支付倒计时结束时间】

    此次案例是在用户秒杀下单后未支付的情况下在页面实时显示根据后端传过来的待支付结束时间倒计时 代码可完全复制粘贴! (只需修改<!-- 待支付商品实时倒计时js部分 --> buyTime变 ...

最新文章

  1. (三)Lucene——Field域和索引的增删改
  2. 3dContactPointAnnotationTool开发日志(二二)
  3. word python 域 操作_python实现在windows下操作word的方法
  4. 二叉树的序列化和反序列化
  5. 直播预告 | 双边分支网络BBN:攻坚长尾分布的现实世界任务
  6. Got a packet bigger than 'max_allowed_packet' bytes
  7. php redis新增数据类型,Redis有哪几种数据类型
  8. 在清华听演讲系列音频下载地址收集
  9. 飞畅科技教你如何选择合适的交换机?
  10. mysql和sqlite3 ios_iOS开发:用SQLite3存储和读取数据
  11. kafka消费者分区消费策略
  12. UNIX不带缓存的IO函数
  13. 好用的linux连接工具
  14. 论文中MathType公式居中,编号右对齐
  15. 2014年FME校园培训考核通过名单
  16. 读书笔记——《图解TCP/IP》(1/4)
  17. 对于最小二乘法的解释
  18. excel表格打印每页都有表头_如何给将要打印的excel表格设置统一的表头
  19. iTunes 未能备份iphone,因为无法将备份存储在电脑上
  20. Android马甲包

热门文章

  1. html长图转换成pdf,将长 html 导入拆分 PDF
  2. 现代软件工程 作业 4 个人作业
  3. java中setDocument_Java ActionItem.setDocumentId方法代码示例
  4. 多因素方差分析中预测因素的筛多_用回归来理解方差分析(二):两因素方差分析...
  5. JdbcTemplate(操作数据库-添加功能)
  6. 操作系统之(一篇文章让你简单搞定:什么是进程和线程)
  7. php 计划任务管理,使用php管理crontab计划任务
  8. php正则匹配怎么写,正则表达式 - 求助怎么写php的正则匹配
  9. origin三元相图_扩增子图表解读7三元图:三组差异数量和关系
  10. 获取两个圆的重合部分的经纬度_(2)万向节的装配和动画仿真:重合同轴心装配约束很常用...