网站服务器时间秒杀,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…

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

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

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

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

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

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

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

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

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

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

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

使用IDEA 连接mysql数据库,执行sql指令 1 配置项目的SQL依赖 首先参考这篇博文,创建springboot的基本框架 在创建项目的过程中,需要选择SQL相关的依赖,如下: SQL勾选:MySQL Driver,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: ‘姓…

(pytorch-深度学习系列)pytorch中backwards()函数对梯度的操作

backwards()函数对梯度的操作 对于一个新的tensor来说&#xff0c;梯度是空的&#xff1b;但当对这个tensor进行运算操作后&#xff0c;他就会拥有一个梯度&#xff1a; x torch.ones(2, 2, requires_gradTrue) print(x) print(x.grad_fn)y x 2 print(y) print(y.grad_fn)…

(pytorch-深度学习系列)pytorch实现线性回归

pytorch实现线性回归 1. 实现线性回归前的准备 线性回归输出是一个连续值&#xff0c;因此适用于回归问题。回归问题在实际中很常见&#xff0c;如预测房屋价格、气温、销售额等连续值的问题。 与回归问题不同&#xff0c;分类问题中模型的最终输出是一个离散值。我们所说的图…

(pytorch-深度学习系列)pytorch实现多层感知机(手动定义模型)对Fashion-MNIST数据集进行分类-学习笔记

pytorch实现多层感知机对Fashion-MNIST数据集进行分类&#xff08;手动定义模型&#xff09; 多层感知机&#xff1a; 多层感知机在单层神经网络的基础上引入了一到多个隐藏层&#xff08;hidden layer&#xff09;。隐藏层位于输入层和输出层之间。 输入和输出个数分别为4和…

(pytorch-深度学习系列)ResNet残差网络的理解-学习笔记

ResNet残差网络的理解 ResNet伴随文章 Deep Residual Learning for Image Recognition 诞生&#xff0c;该文章是MSRA何凯明团队在2015年ImageNet上使用的网络&#xff0c;在当年的classification、detection等比赛中&#xff0c;ResNet均获了第一名&#xff0c;这也导致了Res…

(pytorch-深度学习系列)卷积神经网络LeNet-学习笔记

卷积神经网络LeNet 先上图&#xff1a;LeNet的网络结构 卷积(6个5∗5的核)→降采样(池化)(2∗2的核&#xff0c;步长2)→卷积(16个5∗5的核)→降采样(池化)(2∗2的核&#xff0c;步长2)→全连接16∗5∗5→120→全连接120→84→全连接84→10\begin{matrix}卷积 \\ (6个5*5的核…

(pytorch-深度学习系列)深度卷积神经网络AlexNet

深度卷积神经网络AlexNet 文字过多&#xff0c;但是重点已经标出来了 背景 在LeNet提出后的将近20年里&#xff0c;神经网络一度被其他机器学习方法超越&#xff0c;如支持向量机。虽然LeNet可以在早期的小数据集上取得好的成绩&#xff0c;但是在更大的真实数据集上的表现并…

(pytorch-深度学习)包含并行连结的网络(GoogLeNet)

包含并行连结的网络&#xff08;GoogLeNet&#xff09; 在2014年的ImageNet图像识别挑战赛中&#xff0c;一个名叫GoogLeNet的网络结构大放异彩。它虽然在名字上向LeNet致敬&#xff0c;但在网络结构上已经很难看到LeNet的影子。GoogLeNet吸收了NiN中网络串联网络的思想&#…

(pytorch-深度学习)实现稠密连接网络(DenseNet)

稠密连接网络&#xff08;DenseNet&#xff09; ResNet中的跨层连接设计引申出了数个后续工作。稠密连接网络&#xff08;DenseNet&#xff09;与ResNet的主要区别在于在跨层连接上的主要区别&#xff1a; ResNet使用相加DenseNet使用连结 ResNet&#xff08;左&#xff09;…