zoukankan      html  css  js  c++  java
  • 一个有趣的倒计时问题

    背景:
         某项目前端使用HTML5,后端提供HTTP接口,某个功能是前端显示合约倒计时(合约生效日期及结束日期配置在DB),允许少量误差

    方案1:
          后端提供的接口只返回合约结束时间,前端直接将后端返回的结束时间减去客户端时间即为倒计时

    陷阱:客户端的时间用户是可以随意改的,甚至用户的时区都有可能不同,所以这种方法统计出来的倒计时必然是不能得到保证的

    方案2:

           后端提供的接口只返回由后端计算出来的倒计时(虽然后端机器可能有多台,但跟用方案1比毕竟机器可控),前端直接使用该倒计时,使用setInterval()函数

    可是运行了一段时间之后,时间却不准了,为什么呢?原来:js实质是单线程的,经过一段时间后,倒计时时间差异会变大而慢慢变得不准。如果遇上机器休眠那差距就更大了。

    方案3:
          后端返回结束时间+后端计算出来的倒计时,前端也计算倒计时与服务端算出来的作为偏移量,每个循环取前端取结束时间+偏移量-当前时间,算法如下

    //endTime和leftTimeMillions来自后端,分别代表结束时间与剩余时间毫秒数
    var currentTime = new Date().getTime();
    //前后端时间偏差量
    var offset = endTime - currentTime - leftTimeMillions;
    //倒计时
    var leftTimeResult = endTime - currentTime + offset;
    

      

    欢迎转载,转载请务必注明出处
  • 相关阅读:
    正则表达式
    正则表达式的lastIndex属性
    vuejs 在移动端调起键盘并触发‘前往’按钮
    适配手机端之 rem
    prototype和_proto_
    ES6 class的继承-学习笔记
    js-null 、undefined
    ES6 class的基本语法-学习笔记
    chrome插件 - Manifest文件中的 background
    别踩白块
  • 原文地址:https://www.cnblogs.com/mzsg/p/5435931.html
Copyright © 2011-2022 走看看