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之过滤元素操作小结
Nov 30 Javascript
jquery sortable的拖动方法示例详解
Jan 16 Javascript
批量修改标签css样式以input标签为例
Jul 31 Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
vue增删改查的简单操作
Jul 15 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 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 setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
Python 抓取动态网页内容方案详解
2014/12/25 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
Champion官网:美国冠军运动服装
2017/01/25 全球购物
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
物业工作计划书
2014/01/10 职场文书
《春晓》教学反思
2014/04/20 职场文书
预备党员公开承诺书
2014/05/28 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
工作试用期自我评价
2015/03/10 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
分享python函数常见关键字
2022/04/26 Python