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 相关文章推荐
用循环或if语句从json中取数据示例
Aug 18 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
js实现图片放大展示效果
Aug 30 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 Javascript
比较node.js和Deno
Apr 27 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
thinkphp模板继承实例简述
2014/11/26 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
vue多次循环操作示例
2019/02/08 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
Python httplib模块使用实例
2015/04/11 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
Django中ORM的基本使用教程
2020/12/22 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
文明学生标兵事迹
2014/01/21 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
2014年高考决心书
2014/03/11 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
行政处罚听证告知书
2015/07/01 职场文书
javascript的setTimeout()使用方法总结
2021/11/20 Javascript