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匿名函数
Nov 25 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
JS document内容及样式操作完整示例
Jan 14 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 事务处理数据实现代码
2010/05/13 PHP
PHP 透明水印生成代码
2012/08/27 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
Prototype Array对象 学习
2009/07/19 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
python实现桌面气泡提示功能
2019/07/29 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
高效课堂标语
2014/06/26 职场文书
装修活动策划方案
2014/08/27 职场文书
党员剖析材料范文
2014/12/18 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
职工培训工作总结
2015/08/10 职场文书