倒计时

dack 发布于2019-08-21 10:52 / 3364人阅读

摘要：大多数人说起倒计时都会想起，包括以前的我。比如倒计时秒这种写法咋一看没问题，仔细看还没看不出问题。。个人觉得较好的解决方案就是在页面的时候重新向服务器请求计时时间

背景

记得以前在老东家曾经遇到的坑，前几天有朋友提起，记录一下。

setInterval

大多数人说起倒计时都会想起 setInterval ，包括以前的我。比如倒计时 60 秒

var time = 60;
var timer = setInterval(function(){
   if( --time > 0 ){
       console.log( time );
   }else{
       console.log( "finish" );
       clearInterval(timer);
   }
},1000)

这种写法咋一看没问题，仔细看还没看不出问题。。
时间一长就出bug了。
做个小实验，在 console 丢下代码，代码只有 4 行，然后观察 console 输出

var counter = 0;  // 作为参照
setInterval(function(){
     console.log( ++counter % 60,new Date().getSeconds(), new Date().valueOf() );
},1000)

ok，代码开始跑了。然而这个时候我开始看游戏直播了，反正这玩意短时间看不出结果的。偶尔回头看看代码运行的情况

当看着 3 3 5 5 7 7 9 9 11 11 13 13 的时候。我好慌

另外的思路

var Timer = function(sec,callback){
   this.second = sec;                       // 倒计时时间（单位：秒)
   this.counter = 0;                        // 累加器，存储跳动的次数
   this.timer = null;                       // setTimeout 实例
   this.before = (new Date()).valueOf();    // 开始时间 -- 时间戳，用于比较
   this.loop = function(){                  // 开始倒计时
       this.timer && clearTimeout(this.timer);
       var _this = this;
       this.counter++;
       var offset = this.counter * 1000 - (new Date()).valueOf() + this.before, // 倒计时每秒之间的偏差
           ctimestamp = this.second - this.counter;                             // 实际剩余秒数
       this.timer = setTimeout(function(){
           if( ctimestamp < 1 ){
               typeof callback == "function" && callback( ctimestamp, true );
               return;
           } else{ 
               typeof callback == "function" && callback( ctimestamp, false );
               _this.loop();
           }
       },offset);
   }; 
   this.loop(); // 倒计时开始
   return this; 
};

// 调用
new Timer(2000,function(second,finish){
   console.log( finish ? "finish" : second );
})

最后的话

这种写法也有一定的隐患，比如用户在倒计时开始之后修改本地的系统时间，就有可能出现较大的误差。
个人觉得较好的解决方案就是在页面 visibilitychange 的时候重新向服务器请求计时时间

GPU云服务器云服务器倒计时网页倒计时倒计时插件倒计时程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86320.html

js倒计时小插件－－CountDown.js

摘要：刚写的开源小插件，在这里宣传下地址欢迎吐槽一个用来实现简单页面倒计时的轻量级工具根据要计时的秒数打开一个显示剩余时间的倒计时参数放置倒计时的元素要计时的秒数用于给倒计时设置标记可以给多个倒计时设置同一个标记分割时分秒的分割符倒计时结束时执行刚写的开源小插件，在这里宣传下 ^_^ github地址：https://github.com/flypie2/Co... 欢迎吐槽 ^_^ Co...

mdluo 2019-08-22 10:34 评论0 收藏0
C语言小项目——计时器（倒计时+报警提示）

摘要：大家对计时器应该不陌生，我们在制定一个计划时，经常喜欢设置一个倒计时来规定完成时限，等到计时结束，它还会报警提示，今天，我就用语言编写一个简易的倒计时计时器。 ...

Lin_YT 2021-11-17 09:33 评论0 收藏0
发送短信验证，后按钮倒计时，防止刷新倒计时失效

摘要：一般原理是当点击发送按钮时，发送请求到服务器发送短信验证码，成功则把发送按钮设置为不可点击，并且调用定时器，按钮显示倒计时。应用场景在开发发送短信验证功能时候，要解决一个问题，防止恶意或频繁发送短信验证码问题。一般原理是当点击发送按钮时，发送ajax请求到服务器发送短信验证码，成功则把发送按钮设置为不可点击，并且调用定时器，按钮显示倒计时。如果就这样不对倒计时存储做处理，那么当刷...

DevWiki 2019-08-19 18:45 评论0 收藏0
发送短信验证，后按钮倒计时，防止刷新倒计时失效

摘要：一般原理是当点击发送按钮时，发送请求到服务器发送短信验证码，成功则把发送按钮设置为不可点击，并且调用定时器，按钮显示倒计时。应用场景在开发发送短信验证功能时候，要解决一个问题，防止恶意或频繁发送短信验证码问题。一般原理是当点击发送按钮时，发送ajax请求到服务器发送短信验证码，成功则把发送按钮设置为不可点击，并且调用定时器，按钮显示倒计时。如果就这样不对倒计时存储做处理，那么当刷...

Rocture 2019-08-01 15:26 评论0 收藏0
JS-异步函数链式调用(更新：20181221)

摘要：基数，倒计时进入倒计时进入倒计时进入倒计时进入倒计时进入倒计时倒计数结束执行完毕，结果为，准备进入。 2018-12-21 更新1、简化调用方式，更贴近普通函数的风格；精简版戳这里！ 2018-12-05 更新1、支持头节点入参；2、简化调用方式； //源码 function chainedFn(chain,firstFnArguments){ // 入参数据校验 ... ...

lidashuang 2019-08-21 16:39 评论0 收藏0