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 设置标题的自动翻转
Oct 03 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
js的对象与函数详解
Jan 21 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
JavaScript将数组转换为链表的方法
Feb 16 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
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
浅谈JS继承_寄生式继承 & 寄生组合式继承
2016/08/16 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
python 实现矩阵按对角线打印
2019/11/29 Python
python支持多继承吗
2020/06/19 Python
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
社区学习十八大感想
2014/01/22 职场文书
物业品质提升方案
2014/06/08 职场文书
学校个人对照检查材料
2014/08/26 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
财务审计整改报告
2014/11/06 职场文书
志愿者个人总结
2015/03/03 职场文书
上诉状格式
2015/05/23 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL