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

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

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

1.应该使用服务器时间而不是本地时间(本地时间存在时区不同、用户自行设置等问题)。

2.要考虑网络传输的耗时。

3.获取时间时可直接从AJAX的响应头中读取(通过getResponseHeader('Date')来获得),服务器端不需要专门写时间生成脚本。

过程分析:

1.从服务器读到一个时间戳之后便开始计时,不考虑网络传输的耗时:

0b1c3bdc06f8e669f402063b85229947.png

图中的各项标注分别是(上面的时间线采用标准时间,与服务器和页面的时间均无关):

start——页面项服务器发起AJAX请求时的时间。

www_start——服务器响应页面的请求并返回时间戳给页面的时间。

pc_start——页面接受到服务器返回的时间戳并开始计时的时间。

www_end——服务器倒计时结束的时间。

pc_end——页面倒计时结束的时间,同时也是用户在倒计时结束那一刻点击按钮的时间。

end——服务器接收到用户点击信息的时间。

可以看出,即使在倒计时结束的那一刻(也就是秒杀开始那一刻)用户就立即点击鼠标,也会比实际开始抢拍的时间(www_end,即服务器倒计时结束的时间)晚一些(可以很容易的看出,这个时间差正好等于pc_start - start,也就是AJAX从开始发送到接收到响应信息的耗时)。如果有些内行在页面倒计时结束前用脚本发送请求,那么其他用户可就亏大了。所以,我们要解决掉这个时间误差的问题。

2.为了解决时间误差的问题,我们将把页面倒计时的时间缩短一小截(由上面的分析可以得出,这一小截正好等于pc_start - start),使得用户在倒计时结束时发送给服务器的抢拍信息正好在服务器倒计时结束时被接收到:

d7cbd727fab5172d93c6a188a18c05a6.png

图中的各项标注与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每隔一秒去请求服务器,然后将服务器获取到时间显示在页面上,这样虽然能够实现,但存在一个很大的问题,那就是每隔一秒去请求服务器,这样如果用户多了,服务器就会崩溃(内存占用率会很大),所以在我看来,这种方法不可行,我这里给出一种解决方案,能够实现同步服务器时间、同步倒计时,却不占用服务器太多资源,下面我给写实现的思路

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/508025.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

i7 8700 服务器系统,i7 8700k 云服务器

i7 8700k 云服务器 内容精选换一换您可以在几分钟之内快速获得基于公有云平台的弹性云服务器设施,并且这些设施是弹性的,可以根据需求伸缩。该任务指导用户如何创建支持IB网卡的弹性云服务器,包括管理控制台方式和基于HTTPS请求的API(Applica…

(教程)2020最新windows10/anaconda/pytorch-gpu环境配置(附CUDA/cuDNN配置)

(教程)2020最新windows10/anaconda/pytorch-gpu环境配置(附CUDA/cuDNN配置) 环境:windows10 nvidia 165ti 1. 安装anaconda3,自行安装 https://www.anaconda.com/download/ 安装完成后,配置…

信息论 哈夫曼编码 与 菲诺编码的实现(对一幅BMP格式的灰度图像(个人 证件照片)进行二元霍夫曼编码和译码。并进行编码效率的计算,对一幅BMP格式的灰度图像进行二 元Fano编码、译码 )

信息论 哈夫曼编码 与 菲诺编码的实现(对一幅BMP格式的灰度图像(个人 证件照片)进行二元霍夫曼编码和译码。并进行编码效率的计算,对一幅BMP格式的灰度图像进行二 元Fano编码、译码 ) 原始图片 灰度处理 编码生成的…

教你如何使用hexo以及nginx、github搭建属于自己的博客(操心的妈妈级教学)

教你如何使用hexo以及nginx、github搭建属于自己的博客(妈妈级教学) ~~ 1.解释一下你要的服务器的效果以及对应的操作 ~~ 首先你要有自己的一台服务器,可以是云服务器,或者你可以用自己的电脑作为服务器,&#xff0…

IndexError: invalid index of a 0-dim tensor. Use `tensor.item()` in Python or `tensor.item<T>()` in

使用python pytorch框架出现问题&#xff1a; IndexError: invalid index of a 0-dim tensor. Use tensor.item() in Python or tensor.item<T>() in C to convert a 0-dim tensor to a number 修改loss.data[0]为loss.item() 例&#xff1a; if (i1) % 100 0:print…

Python enumerate函数

Python enumerate函数 描述 enumerate() 函数用于将一个可遍历的数据对象(如列表、元组或字符串)组合为一个索引序列&#xff0c;同时列出数据和数据下标&#xff0c;一般用在 for 循环当中。 Python 2.3. 以上版本可用&#xff0c;2.6 添加 start 参数。 语法 以下是 enu…

(菜鸟入门)使用pytorch框架实现前馈神经网络

前馈神经网络 常见的前馈神经网络有感知机&#xff08;Perceptrons&#xff09;、BP&#xff08;Back Propagation&#xff09;网络等。前馈神经网络(FNN)是人工智能领域中最早发明的简单人工神经网络类型。各神经元分层排列。每个神经元只与前一层的神经元相连。接收前一层的…

Windows下如何如何将项目上传至GitHub?

安装git客户端 进入官网&#xff0c;点击右侧下载windows版本的软件包 如果下载慢的话&#xff0c;给一个传送门&#xff0c;可以快速下载&#xff1a; 双击安装 一直点击下一步就可&#xff0c;安装位置可以自己选择一下 Github创建仓库 填写项目名称以及ba…

(pytorch-深度学习系列)pytorch卷积层与池化层输出的尺寸的计算公式详解

pytorch卷积层与池化层输出的尺寸的计算公式详解 注&#xff1a;这篇blog写的不够完善&#xff0c;在后面的CNN网络分析padding和stride详细讲了公式&#xff0c;感兴趣的可以移步这里&#xff1a;卷积神经网络中的填充(padding)和步幅(stride) 要设计卷积神经网络的结构&…

(pytorch-深度学习系列)使用Pytorch实现小型卷积神经网络网络

卷积层 卷积神经网络中每层卷积层&#xff08;Convolutional layer&#xff09;由若干卷积单元组成&#xff0c;每个卷积单元的参数都是通过反向传播算法最佳化得到的。卷积运算的目的是提取输入的不同特征&#xff0c;第一层卷积层可能只能提取一些低级的特征如边缘、线条和角…

RuntimeError: size mismatch, m1: [80 x 4], m2: [320 x 50] at ..\aten\src\TH/generic/THTensorMath.cpp

RuntimeError: size mismatch, m1: [80 x 4], m2: [320 x 50] at …\aten\src\TH/generic/THTensorMath.cpp:41 使用pytorch进行深度学习的训练会出现这种问题&#xff0c;原因是fc全连接层的输入维度问题&#xff0c;由于输入是二维的数据&#xff0c;很多时候在输入全连接层…

idea创建springboot项目,一直在reading pom.xml

problem&#xff1a;遇到的问题 idea创建springboot项目&#xff0c;一直在reading pom.xml 解决方法有三种&#xff1a; &#xff08;1&#xff09;修改windows配置文件 c;\windows\System32\drivers\etc\hosts将12.0.0.1 localhost前的注释符号#去掉 &#xff08;2&#x…

springboot 项目实战 基本框架搭建(IDEA)

springboot 项目实战 基本框架搭建&#xff08;IDEA&#xff09; IDEA下载 我使用的是破解的专业版IDEA&#xff0c;使用权一直到2089年&#xff1a; 下载IDEA: 下载processional版本&#xff0c;然后百度搜索激活码即可概率激活&#xff0c;如果你不成功就多找几个激活码 配…

使用IDEA 连接mysql数据库,执行sql指令

使用IDEA 连接mysql数据库&#xff0c;执行sql指令 1 配置项目的SQL依赖 首先参考这篇博文&#xff0c;创建springboot的基本框架 在创建项目的过程中&#xff0c;需要选择SQL相关的依赖&#xff0c;如下&#xff1a; SQL勾选&#xff1a;MySQL Driver&#xff0c;JDBC API …

thymeleaf There was an unexpected error (type=Internal Server Error, status=500).

thymeleaf There was an unexpected error (typeInternal Server Error, status500). 使用thymeleaf依赖&#xff0c;无法访问html文件&#xff0c;解决方法有以下几种可能&#xff1a; 1. 未加载thymeleaf依赖&#xff0c;打开pom.xml&#xff0c;加入依赖&#xff1a; <…

org.attoparser.ParseException: Could not parse as expression: “

Caused by: org.attoparser.ParseException: Could not parse as expression: " {field: ‘id’, title: ‘ID’, fixed: ‘left’, unresize: true, sort: true} , {field: ‘number’, title: ‘学号’, edit: ‘number’, sort: true} , {field: ‘name’, title: ‘姓…

windows10 计算文件的HASH(SHA256\MD5等)

windows10 计算文件的HASH&#xff08;SHA256\MD5等&#xff09; certutil -hashfile .\文件名 带后缀 SHA256可选哈希算法参数&#xff1a;MD2 MD4 MD5 SHA1 SHA256 SHA384 SHA512

ubuntu给pip换源,给conda换源

ubuntu 给pip换源&#xff0c;给conda换源 //修改 ~/.pip/pip.conf (没有就创建一个)&#xff0c; 内容如下&#xff1a; [global] timeout 6000 index-url https://pypi.tuna.tsinghua.edu.cn/simple trusted-host pypi.tuna.tsinghua.edu.cn //给conda换源 conda config …

ubuntu怎么在jupyter notebook中引入anaconda虚拟环境

ubuntu怎么在jupyter notebook中引入anaconda虚拟环境 ~坑&#xff1a; 先activate visaul envirument 再打开jupyter notebook 是不行的 conda install nb_conda 也是不行的 正确做法&#xff1a; conda create -n your_env_name pythonX.X #创建环境 //先activate pytorch …

傅里叶变换原理解析

傅里叶变换原理解析 震动频率&#xff1a;节拍数/秒 矢量旋转频率&#xff1a;圈/秒傅里叶频域就是&#xff1a;音频信号波形以不同的频率旋转形成的图形的质心的坐标变化&#xff0c;即&#xff08;frequency, (x,y)&#xff09; &#xff08;其中实数为x轴坐标&#xff0c;虚…