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


Posted in Javascript onSeptember 12, 2017

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

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

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

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

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

优点:

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

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

Javascript 相关文章推荐
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
Bootstrap基础学习
Jun 16 Javascript
简单实现js页面切换功能
Jan 10 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
vue axios整合使用全攻略
May 24 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 #Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 #Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 #Javascript
js数组实现权重概率分配
Sep 12 #Javascript
js 概率计算(简单版)
Sep 12 #Javascript
JavaScript面向对象精要(下部)
Sep 12 #Javascript
在Vue.js中使用Mixins的方法
Sep 12 #Javascript
You might like
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
javascript事件委托的方式绑定详解
2015/06/10 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
canvas绘制多边形
2017/02/24 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
举例详解Python中yield生成器的用法
2015/08/05 Python
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
python调用java的jar包方法
2018/12/15 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
css3的transition属性详解
2014/12/15 HTML / CSS
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
学生顶撞老师的检讨书
2014/09/17 职场文书
2014年残联工作总结
2014/11/21 职场文书
检讨书格式
2015/05/07 职场文书
开国大典观后感
2015/06/04 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL