如何解决跳转页面后setInterval()计时器停止执行的问题

路游远方
  • 94

在做注册页面,发送验证码倒计时的时候,我把倒计时的second秒数存为cookie,这样在刷新和离开页面再进来时,可以继续执行计时器,而不会从心开始。
但是当我用window.location.href 跳转页面再回到注册页面时,发现秒数还是离开页面时的秒数

请问有人解决过吗?

//发送验证码
$('.btnStr').click(function(){
    var second = 30;
    start(second);
})
function start(second){
    var timer = setInterval(function(){
        if(second>0){
            second--;
            $('.btnStr').html(second+'秒后重新发送');
        }else{
            $('.btnStr').html('发送验证码');
            clearInterval(timer);
        }
        setCookie('second',second,1);
    },1000)
}
//设置cookie
function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}
//获取cookie
function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
    }
    return "";
}
//检查cookie
function checkCookie(){
    var overplus=getCookie("second");
    if (overplus!=0){
        start(overplus);
    }
}
回复
阅读 5.6k
4 个回答
李十三
  • 13.3k
✓ 已被采纳

不应该存秒数 难道不是存一个发送验证码的开始时间 判断一下与当前时间相差是不是60秒就行了

你页面离开了就不会去维护cookie里的倒计时了呀,你页面切回来的时候肯定是从你离开时的那个点开始计数的。。。
你可以用系统时间哦,cookie里存2个指一个是倒计时,一个是开始倒计时的时间。等你切回来的时候再跟目前的时间做一个判断,从而修正偏移值。

没看代码;当页面销毁js计时器肯定已经销毁,你可以在点击发送验证码的时候记录 new Date后的30秒是几分几秒,把这个时间记录在cookie,当你再回到页面的时候,看是否已经到cookie的时间或者 用 cookie的时间 - 回到页面的时间

你页面离开了,当然停止执行了啊。
建议如下:
1.后端要记录验证码下发时间
2.那个数字页面上不用管,刷新了重新开始就开始了,点击获取后,如果后端判断时间还有30s,把这个30s返回来,你再放在按钮上就可以了

宣传栏