js 倒计时(高效率服务器时间同步)

 更新时间:2017年09月12日 21:54:21   作者:snaildev  
首先说一下,为什么要服务器时间同步, 因为服务器时间和本地电脑时间存在一定的时间差。有些对时效性要求非常高的应用,例如时时彩开奖,是不能容忍这种时间差存在的

方案1:每次倒计时去服务端请求时间

//开启定时器
var timer = setInterval(function () {  
  //执行请求,获取当前服务端时间并进行相应操作
}, 1000);

这个方案对于稍微有点经验的开发人员来说,都知道是不可取的。因为这会给服务器造成无法想象的压力,导致应用崩溃。在这个页面停留一分钟,那么请求就发送了60次,假如此时有100个人在访问这个页面,那么一分钟就有6000条请求,人数如果再增长,这绝对会造成不必要的服务器压力。并且这个方案的倒计时,也会存在很大的误差,因为请求存在延迟,跟你的网络状态也有很大的关系。

方案2:从服务端返回以服务器时间为基准的倒计时时间戳

//开启定时器
//假设请求获取到一个时间戳时间差 dateDiff
var timer = setInterval(function () {
  //每秒会获取本地时间,这样就算执行的周期不准确 也可以准确的获取时间差
  var countDown = endTime - (+Date.now())/1000 + dateDiff;
  // 倒计时页面渲染
}, 1000);

优点:

在页面生命周期中请求一次
准确度高,就算页面打开很久还是保持高准确度
缺点:

由于每秒获取当前时间,假如刻意在倒计时时期内,修改了本地时间将会导致倒计时异常。

相关文章

  • js文件Cookie存取值示例代码

    js文件Cookie存取值示例代码

    这篇文章主要介绍了js文件Cookie存取值的使用,需要的朋友可以参考下
    2014-02-02
  • 简单了解JS打开url的方法

    简单了解JS打开url的方法

    这篇文章主要介绍了简单了解JS打开url的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • JavaScript设计模式之外观模式介绍

    JavaScript设计模式之外观模式介绍

    这篇文章主要介绍了JavaScript设计模式之外观模式介绍,外观模式是用于由于子系统或程序组成较复杂而提供的一个高层界面接口,使用客户端更容易访问底层的程序或系统接口,需要的朋友可以参考下
    2014-12-12
  • JavaScript如何实现LRU缓存淘汰算法

    JavaScript如何实现LRU缓存淘汰算法

    LRU(Least Recently Used)缓存淘汰算法是一种常见的缓存淘汰策略,它的核心思想是优先淘汰最近最少使用的缓存数据,以保证缓存中的数据始终是最热门的。本文主要介绍了一些关于如何实现LRU缓存淘汰算法的方法,感兴趣的小伙伴可以参考一下
    2023-04-04
  • 推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)

    推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)

    这篇文章主要为大家详细介绍了三款不错的图片压缩上传插件,webuploader、移动端上传插件localResizeIMG4以及LUploader)
    2017-04-04
  • js判断两个数组相等的5种方法实例

    js判断两个数组相等的5种方法实例

    再最近的一次实际项目开发中,又遇到了需要对两个数组内容进行比较的需求,索性整理下,这篇文章主要给大家介绍了关于js判断两个数组相等的5种方法,需要的朋友可以参考下
    2022-05-05
  • JS获取计算机mac地址以及IP的实现方法

    JS获取计算机mac地址以及IP的实现方法

    本篇文章主要是对利用JS获取计算机mac地址以及IP的实现方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • JavaScript使用Proxy编写一个取值限制器

    JavaScript使用Proxy编写一个取值限制器

    最近一直在开发低代码平台的东西,由于项目里面东西有点多,取值或调用起来比较麻烦,使用本文就将使用Proxy编写一个取值限制器,需要的小伙伴可以参考下
    2023-12-12
  • 自适应方案postcss-pxtorem使用步骤

    自适应方案postcss-pxtorem使用步骤

    这篇文章主要介绍了如何使用postcss-pxtorem插件将px单位转换为rem单位,包括安装插件、创建配置文件和引入脚本的步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-11-11
  • javascript单页面手势滑屏切换原理详解

    javascript单页面手势滑屏切换原理详解

    这篇文章主要为大家详细介绍了javascript单页面手势滑屏切换原理,感兴趣的小伙伴们可以参考一下
    2016-03-03

最新评论