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 相关文章推荐
js控制CSS样式属性语法对照表
Dec 11 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
解决Layui 表格自适应高度的问题
Nov 15 Javascript
JavaScript闭包原理与用法学习笔记
May 29 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笔记之:AOP的应用
2013/04/24 PHP
php防止sql注入简单分析
2015/03/18 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
php简单复制文件的方法
2016/05/09 PHP
Thinkphp微信公众号支付接口
2016/08/04 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
JavaScript中的其他对象
2008/01/16 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
Python多线程学习资料
2012/12/19 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Python画图高斯分布的示例
2019/07/10 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
浅谈Python中的字符串
2020/06/10 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
详解python的super()的作用和原理
2020/10/29 Python
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
酒店员工检讨书
2014/02/18 职场文书
社区工作感言
2014/02/21 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
图书室标语
2014/06/21 职场文书
摘录式读书笔记
2015/07/01 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python