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 相关文章推荐
javascript里的条件判断
Feb 27 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 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常用函数汇总
2014/12/17 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
js日历功能对象
2012/01/12 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
jQuery冲突问题解决方法
2021/01/19 jQuery
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python单例模式实例详解
2017/03/01 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
学术会议欢迎词
2014/01/09 职场文书
旷课检讨书1000字
2014/02/14 职场文书
大学迎新生标语
2014/10/06 职场文书
2015元旦标语横幅
2014/12/09 职场文书
索赔员岗位职责
2015/02/15 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
主持人大赛开场白
2015/05/29 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers