秒杀倒计时如何保证前端与服务器时间统一

news/2024/11/9 10:07:31/

目录快车

  • 目标
  • 实现
    • 常规做法
      • 步骤
      • 弊端
    • 解决方案
      • 步骤
      • 弊端
      • 优化方案
  • 温馨提示

目标

秒杀倒计时 前端与服务器时间统一 ,误差不超过1000ms(这个误差值可以根据自己的业务调整)

实现

常规做法

步骤

一般情况下要实现前后端时间的统一,肯定不能用本地时间作为基准进行倒计时,因为本地时间与服务器时间极有可能有误差,所以常规做法是在初次请求数据的时候把服务器时间拿过来,然后通过计时器计时

弊端

首先这种方式会存在一个响应时间的问题,也就是说在服务端拿到时间之后返回给前端时,由于网络延迟的问题,前端真正拿到这个时间数据的时候并不能保证它是服务器的当前时间,因为还有一个响应时间的误差在里面;
其次通过计时器计时,比如setTimeout、setInterval 这种内置方法,这个同样会存在误差,不同平台的误差不一样,会被机器性能、内存占用等多方面因素影响,一分钟有可能会误差几秒钟,这种差值是无法被接受的;
还有一种做法是每秒请求一次服务器拿时间,emmm…这个不是常规做法,这是自杀式方案,勿用!

解决方案

步骤

既然是解决方案,肯定是要解决以上常规做法带来的弊端,下面我们看一下具体实现
首先是响应时间的问题,这个很好解决,直接把响应时间拿到之后加上就行了,我们暂且称为服务器矫正时间,用ST表示;
主要问题在于如何缩小在计时过程中的毫秒甚至秒级误差,既然计时器方法被抛弃了,那么我们只有一个办法了,就是获取本地时间,这样可以确保前端和后端的时间精度是一致的,获取本地时间又不能完全使用本地时间,那么就用本地时间(用LT表示)与ST计算得到一个差值(C1表示),再用本地时间加上这个差值,它就是服务器时间,也就是 ST=LT+C1 ,所以说我们可以通过定时器每次请求本地时间就可以了,这样能够保证在计时过程中的时间精度;

弊端

这种方案并不是完全可行,还有一个问题就是在定时获取本地时间的过程中,本地时间很有可能被修改,那这个方案就不灵了

优化方案

在以上的基础上,我们可以把每次定时获取的本地时间通过变量记录下来,保证在本轮获取时间的时候能够先得到上次的时间(BT表示),,我们还需要一个预期时间(ZT表示),因为我们很轻易可以拿到每次定时遍历的时间周期(S表示),也就是说比如每500毫秒获取一次时间,那么S=500ms,所以 ZT=BT+S,还要定义一个常量作为预设值(Z表示),这个预设值是预先定义好的,用来控制误差,是预期时间和实际获取时间的误差范围,也就是说,我们拿到实际获取到的时间之后,与预期时间作比较得到差值(C2表示),C2如果超出预设值,那么继续纠偏,所以最终

if ( C2>Z ) {
ST=LT+C1+C2
} else{
ST=LT+C1
}

温馨提示

如果参加抢购什么的,千万别用IE内核的浏览器,性能问题会致使一些网站的倒计时与服务器时间有误差,最好使用火狐或者谷歌浏览器,Safari也是个不错的选择,这样可以很大程度上避免性能问题造成的时间误差,接下来就是拼手速了,拜拜了您呐


http://www.ppmy.cn/news/772014.html

相关文章

andriod通过WiFi控制单片机(智能小车)app+驱动文件

之前做了一个andriod通过Wifi控制单片机的app,最近没事传上来,顺便赚点积分 app主要是界面更加友好,界面上有一个触控摇杆,四个拖动条(0-100),四个开关和四个按钮,作为控制&#xff…

自制 APP Inventor 蓝牙接收数据接收模板 自制遥控小车App的必经之路~

App Inventor 2 WxiBit 汉化增强版 蓝牙发送接收数据模板 写了好多Arduino 硬件的文章 也有物联网的 也有PID 的 这回来分享一下软件 介绍一下我们使用的平台 App Inventor 2 WxiBit 汉化增强版 是华南理工大学 杨道全 老师开发并维护的 一个安卓App 开发平台 相比虽然功能更为…

上门洗车APP --- Android客户端开发 前言及业务简介

上门洗车APP --- Android客户端开发 前言及业务简介 最近有些小累,私自接了一个项目,利用空余时间在开发,也比较乏力,时间和精力上有时候分配不过来,毕竟公司的事情要忙,只能自己抽时间来完成了&#xff0c…

基于STM32设计的遥控小车(手机APP+GPS+温湿度+ESP8266)

一、环境介绍 小车主控MCU: STM32F103ZET6 STM32程序开发IDE: keil5 STM32程序风格: 采用寄存器方式开发,注释齐全,执行效率高,方便移植 手机APP: 采用QT设计,程序支持跨平台编译运行(Android、IOS、Windows、Linux都可以编译运行,对应平台上QT的环境搭建,之前博客…

当前速度火车测试 软件,四大主流火车购票APP对比测评教程

APP图标从左到右依次为:网易火车票、高铁管家、携程旅行、去哪儿旅行 五一小长假进入倒计时,相信小伙伴们对出行已经跃跃欲试,而在购买火车票环节,如今人们拥有更多选择,手机购票因其便利快捷赢得越来越多用户青睐。下面,我们选择目前四大主流手机购票APP进行评测。 网易…

4WD智能小车(树莓派) 手机APP 蓝牙控制 连接教程

1、小车开发版插上蓝牙模块; 2、打开小车看到蓝牙模块指示灯在闪烁,打开手机搜索蓝牙,看到HC06,连接匹配,密码是1234,具体看提示操作; 若看到 YAHBOOM-L 之类名称的,不需要输入密码…

Android遥控车软件设计,手机APP控制,Wifi遥控小车设计资料分享

Wifi遥控小车使用说明: 本例程采用ESP8266 wifi模块与STM32串口连接,并提供AT指令封装库与STM32通讯,实现如下的通讯方式: 1、硬件部分 Wifi模块丝印图即引脚如下: 硬件连接如下: 2、手机APP部分 APP部分我…

图文详解-如何用Axure做一个倒计时功能按钮

本篇主要给大家讲一下如何用Axure巧妙简单的实现一个倒计时功能。 demo地址: http://pan.baidu.com/s/1jI4IRzC 密码: 8ghd 需要更详细学习的同学可以看下面文章。偷懒的同学可以直接在demo里复制出想要的部分即可使用了。 1、把主要元素进行排版设计&#xff1b…