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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
JavaScript 事件系统
Jul 22 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
详解jQuery-each()方法
Mar 13 jQuery
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
基于JavaScript实现轮播图效果
Jan 02 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书写格式详解(必看)
2016/05/23 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
用js做一个小游戏平台 (一)
2009/12/29 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
Django多数据库的实现过程详解
2019/08/01 Python
Python 中@property的用法详解
2020/01/15 Python
Python计算IV值的示例讲解
2020/02/28 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
Java中compareTo和compare的区别
2016/04/12 面试题
实习期自我鉴定
2013/10/11 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
工业设计专业个人求职信范文
2013/12/28 职场文书
生日庆典策划方案
2014/06/02 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
工作服管理制度范本
2015/08/06 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python