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 分页全选或反选标识实现代码
Aug 09 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 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+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
Js 本页面传值实现代码
2009/05/17 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
python实现绘制树枝简单示例
2014/07/24 Python
python删除不需要的python文件方法
2018/04/24 Python
python实现抖音视频批量下载
2018/06/20 Python
Windows下安装Scrapy
2018/10/17 Python
python读取几个G的csv文件方法
2019/01/07 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
django创建简单的页面响应实例教程
2019/09/06 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
医学专业毕业生推荐信
2013/11/14 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
生活部的活动方案
2014/08/19 职场文书
学生会部长竞选稿
2015/11/19 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
2019年教师入党申请书
2019/06/27 职场文书