实现倒计时注意事项

实现一个倒计时思路

使用setTimeout 或者 setInterval 来根据接口返回的时间来渲染倒计时，等结束后取消时间函数。

遇到的问题

当页面切换到后台或者隐藏后，在切回到前台，发现时间跟后台返回的时间对不上；

 

百度后，看到浏览器会自动把未激活页面中的定时器间隔最小值改为1s以上。

解决方式 

监听下页面的隐藏事件，等页面切回到前台后重新渲染下倒计时。可以在页面上记录下倒计时的结束时间。也可以重新从服务器端获取时间。

注意事项，移动端浏览器会直接冻结所有未激活页面上的定时器。

 

写的时候是使用的layui中的倒计时，也顺便记录下

util.countdown的回调中会返回三个参数(date, serverTime, timer)

可以通过判断date返回的是不是【0，0，0，0】来判断是否结束倒计时，如果等于的话可以clearInterval(timer)

 

标签：返回,未激活,实现,倒计时,时间,注意事项,date,页面
来源： https://www.cnblogs.com/sunziyu/p/14097538.html