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 30 Javascript
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
jQuery ajax cache缓存问题
Jul 01 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
原生JS实现汇率转换功能代码实例
May 13 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面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
JQuery 写的个性导航菜单
2009/12/24 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
python如何将图片转换为字符图片
2020/08/19 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
Python自定义一个异常类的方法
2019/06/27 Python
python解析yaml文件过程详解
2019/08/30 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
介绍一下SQL Server的全文索引
2013/08/15 面试题
Java面试题汇总
2015/12/06 面试题
药品质量检测应届生求职信
2013/11/14 职场文书
机械设计职业生涯规划书
2013/12/27 职场文书
爱情保证书范文
2014/02/01 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
另类冲刺标语
2014/06/24 职场文书
房地产端午节活动方案
2014/08/24 职场文书
毕业横幅标语
2014/10/08 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
MySQL 时间类型的选择
2021/06/05 MySQL
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis