手机锁屏后js倒计时停止问题

在开发过程中发现到我们锁屏或切到后台以后,h5界面写的js倒计时停止,不想通过原生监听,解决此问题尝试方法如下

1、h5自带属性,检测当前页面状态

document.hidden

document.mozHidden

document.msHidden

document.webkitHidden

为当前document添加监听addEventListener

经测试发现,在浏览器中可监听到,单手机的webview无法监听

更改思路如下

原本通过定时器每秒执行一次time--实现倒计时,现改为通过获取毫秒数,将两次事件相减,然后用60-差值进行时间的倒计时

(采用了比较low的方案,在此希望有更好方式的同学提供方案)代码如下

var time=60;

function setTime() {

var beforeTime = getTime();

window.setTimeInterval = setInterval(function(){

time =  time-(((getTime() - beforeTime)/1000).toFixed(0));

if(time <= 0){

$("#get_code").text('获取验证码');

clearInterval(setTimeInterval);

return time = 60;

}

$("#get_code").text(time + ' s');

beforeTime= getTime();

},1000);

}

//获取当前毫秒数

function getTime(){

return Date.now();

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,807评论 0 8
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,337评论 0 5
  • 年底大家都盼着回家过春节,闲着无聊用js实现一个火车出发倒计时的小例子。用到的知识是javascript的Date...
    唐小红阅读 589评论 0 4
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,537评论 0 17
  • 似梦一场 回忆如此真实无法平复 去疯...
    何以解忧oL阅读 311评论 0 1