js 倒计时（高效率服务器时间同步）

方案1：每次倒计时去服务端请求时间

//开启定时器
var timer = setInterval(function () {
  //执行请求，获取当前服务端时间并进行相应操作
}, 1000);

这个方案对于稍微有点经验的开发人员来说，都知道是不可取的。因为这会给服务器造成无法想象的压力，导致应用崩溃。在这个页面停留一分钟，那么请求就发送了60次，假如此时有100个人在访问这个页面，那么一分钟就有6000条请求，人数如果再增长，这绝对会造成不必要的服务器压力。并且这个方案的倒计时，也会存在很大的误差，因为请求存在延迟，跟你的网络状态也有很大的关系。

方案2：从服务端返回以服务器时间为基准的倒计时时间戳

//开启定时器
//假设请求获取到一个时间戳时间差 dateDiff
var timer = setInterval(function () {
  //每秒会获取本地时间，这样就算执行的周期不准确 也可以准确的获取时间差
  var countDown = endTime - (+Date.now())/1000 + dateDiff;
  // 倒计时页面渲染
}, 1000);

优点：

在页面生命周期中请求一次
准确度高，就算页面打开很久还是保持高准确度
缺点：

由于每秒获取当前时间，假如刻意在倒计时时期内，修改了本地时间将会导致倒计时异常。

赞 (0)

相关推荐

  • JSP获取服务器时间以倒计时的形式在页面显示

    复制代码 代码如下: <%@ page language="java" import="java.util.*"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <%@ include fi

  • javascript同步服务器时间和同步倒计时小技巧

    javascript同步服务器时间和同步倒计时小技巧

    之前在网上看到有人提问,如何在页面上同步显示服务器的时间,其实实现方法有几种,可能 一般人立马就想到可以使用Ajax每隔一秒去请求服务器,然后将服务器获取到时间显示在页面上,这样虽然能够实现,但存在一个很大的问题,那就是每隔一秒 去请求服务器,这样如果用户多了,服务器就会崩溃(内存占用率会很大),所以在我看来,这种方法不可行,我这里给出一种解决方案,能够实现同步服务器时间.同步倒计时,却不占用服务器太多资源,下面我给写实现的思路: 第一步,当用户第一次浏览页面时,服务器首先获取当前时间并显示在页

  • Javascript实现商品秒杀倒计时（时间与服务器时间同步）

    Javascript实现商品秒杀倒计时（时间与服务器时间同步）

    现在有很多网站都在做秒杀商品,而这其中有一个很重要的环节就是倒计时. 关于倒计时,有下面几点需要注意: 1.应该使用服务器时间而不是本地时间(本地时间存在时区不同.用户自行设置等问题). 2.要考虑网络传输的耗时. 3.获取时间时可直接从AJAX的响应头中读取(通过getResponseHeader('Date')来获得),服务器端不需要专门写时间生成脚本. 过程分析: 1.从服务器读到一个时间戳之后便开始计时,不考虑网络传输的耗时: 图中的各项标注分别是(上面的时间线采用标准时间,与服务器和页

  • js 倒计时（高效率服务器时间同步）

    方案1:每次倒计时去服务端请求时间 //开启定时器 var timer = setInterval(function () { //执行请求,获取当前服务端时间并进行相应操作 }, 1000); 这个方案对于稍微有点经验的开发人员来说,都知道是不可取的.因为这会给服务器造成无法想象的压力,导致应用崩溃.在这个页面停留一分钟,那么请求就发送了60次,假如此时有100个人在访问这个页面,那么一分钟就有6000条请求,人数如果再增长,这绝对会造成不必要的服务器压力.并且这个方案的倒计时,也会存在很大的

  • 使用微信内嵌H5网页解决JS倒计时失效问题

    使用微信内嵌H5网页解决JS倒计时失效问题

    项目要求:将H5商城页面嵌套到公司微信公众号里 项目本身的开发跟移动端网页并无太多差异,只是这昨天遇到一个问题,说是棘手,到也简单. 用户下单后,在选择支付方式页面,有个倒计时的逻辑(从下单时开始计算,24小时后未支付,会有ws自动取消这个订单),js代码如下: <script type="text/javascript"><br> var timespan = '20160113'; //后台程序生成24小时时间差值,这里随便写写 var timer; fun

  • 简单实现JS倒计时效果

    简单实现JS倒计时效果

    本文实例为大家分享了JS倒计时效果的具体代码,供大家参考,具体内容如下 Index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>倒计时</title> <script> function toTwo(n) { if(n>9) { return ''+n; } else { return '0'+n; } }

  • JS倒计时代码汇总

    本文实例总结了常见的JS倒计时代码.分享给大家供大家参考.具体汇总如下: 第一种:精确到秒的javascript倒计时代码  HTML代码: 复制代码 代码如下: <form name="form1">  <div align="center" align="center">  <center>离2010年还有:<br>  <input type="textarea" na

  • 简单实现js倒计时功能

    本文实例为大家分享了js倒计时的具体代码,主要使用了JS的Date对象和定时器setInterval,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title> 倒计时 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=

  • js倒计时简单实现方法

    本文实例讲述了js倒计时简单实现方法的代码,分享给大家供大家参考,具体如下: function timeDown(second) { var month = '', day = '', hour = '', minute = ''; if (second >= 86400 * 30) { month = Math.floor(second / (86400 * 30)) + '月'; second = second % (86400 * 30); } if (second >= 86400)

  • Js倒计时代码，当鼠标离开页面与回到页面会自动停止与开始

    根据鼠标判断时间:Js倒计时 0) {alert("停止计时");return false;}document.location="#"; this.disabled=true;'> 0) { document.getElementById("downloadbtn").value = '还有 '+timeout+' 秒'; timeCount = setTimeout('countdown()',1000); } timeout--; }

  • js倒计时显示实例

    话不多说,请看实例代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js倒计时显示-细数逝去的过往</title> <style type="text/css"> #clock { font: bold 24pt sans; background-color: #f5f5f5; padding: 10px 1

  • 详解linux ntp服务器时间同步设置

    linux ntp服务器时间同步设置 时间同步这个需求在很多地方都有.比如安装cm和cdh的话,需要ntp时间同步,否则会出现红色警告 这里主要是设置一台服务器作为主服务器,让其他机器同步这台机器的时间,而且是配置的本地时间,没有同步internet时间,因为很多时候服务器不能联网 首先我们这里设置2台机器,主机器为192.168.5.102,另外一台为192.168.5.103 首先设置主机器 编辑/etc/ntp.conf文件 在里面加上 restrict 127.0.0.1 # 开启内部递

随机推荐