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 相关文章推荐
一个js写的日历(代码部分网摘)
Sep 20 Javascript
基于jquery的模态div层弹出效果
Aug 21 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
原生js+ajax分页组件
Jan 30 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
dedecms系统常用术语汇总
2007/04/03 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
Python基于twisted实现简单的web服务器
2014/09/29 Python
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
简单了解python的一些位运算技巧
2019/07/13 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
文明单位汇报材料
2014/12/24 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
Pandas数据结构之Series的使用
2022/03/31 Python