美文网首页橙子学院-30天专注橙长计划
手机锁屏后js倒计时停止问题

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

作者: 非小惰 | 来源:发表于2017-05-22 16:04 被阅读0次

    在开发过程中发现到我们锁屏或切到后台以后,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倒计时停止问题

        本文链接:https://www.haomeiwen.com/subject/fxtixxtx.html