实现倒计时注意事项

实现一个倒计时思路

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

遇到的问题

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

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

解决方式 

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

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

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

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

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

原文地址:https://www.cnblogs.com/sunziyu/p/14097538.html