获取验证码倒计时优化 页面刷新实时倒计时

Posted 2020-07-19

现在很多页面是需要获取验证码的，但是相信很多页面是没有做这样的优化的，比如下面这个场景：

现在访问一个注册页面，页面有一个填写手机号，获取验证码的按钮，点击获取验证码按钮之后，按钮变成灰色，然后是60倒计时效果。在60S内我无法再次点击获取验证码按钮。因为按钮是灰色的，不可点击状态。

但是，如果在倒计时任然进行时我刷新一下页面，一般的页面就会全部刷新，包括倒计时效果也没有了，按钮恢复到这最初可点击状态，这其实是不符合逻辑的。按正常逻辑是，页面任然倒计时，如果我刷新页面，倒计时任然存在，并且按钮不可点击。

再有一种场景：如果在倒计时任然进行时，我关闭了页面，然后在60S内重新打开页面，按到里说60s时间还没有过完，我重新打开页面，倒计时效果应该任然存在，并且与实际流逝时间对应，也就是说，我点击按钮，倒计时进行到50s的时候，我关闭页面，然后过去40s之后我重新打开页面，倒计时效果应该进行至10s。

但是，现有很多页面是没有实现这样的逻辑的。也就是说页面刷新，倒计时就没有了，按钮又恢复了，自然是不合理不符合逻辑的，针对这样的问题我的解决方案如下。

1.点击获取验证码按钮，改变按钮为不可点击状态，进行倒计时计时器，并且实时记录倒计时秒数，以及当前时间time1。

2.页面刷新的时候监听倒计时按钮，获取倒计时秒数，以及页面关闭的时的时间time1，和当前时间time2。

3.如果当前时间与关闭页面的时间的差  小于关闭页面的倒计时秒数，倒计时任然再进行，修改按钮为倒计时样式。

核心代码如下：

getcode.js

//防止页面刷新倒计时失效
/**
 * 
 * @param {Object} obj  获取验证码按钮
 */
function monitor(obj) {
    var LocalDelay = getLocalDelay();
    var timeLine = parseInt((new Date().getTime() - LocalDelay.time) / 1000);
    if (timeLine > LocalDelay.delay) {
        console.log("过期");
    } else {
        _delay = LocalDelay.delay - timeLine;
        obj.text(_delay).addClass("btn-disabled");
        var timer = setInterval(function() {
            if (_delay > 1) {
                _delay--;
                obj.text(_delay);
                setLocalDelay(_delay);
            } else {
                clearInterval(timer);
                obj.text("获取验证码").removeClass("btn-disabled");
            }
        }, 1000);
    }
};


//倒计时效果
/**
 * 
 * @param {Object} obj 获取验证码按钮
 * @param {Function} callback  获取验证码接口函数
 */
function countDown(obj, callback) {
    if (obj.text() == "获取验证码") {
        var _delay = 60;
        var delay = _delay;
        obj.text(_delay).addClass("btn-disabled");
        var timer = setInterval(function() {
            if (delay > 1) {
                delay--;
                obj.text(delay);
                setLocalDelay(delay);
            } else {
                clearInterval(timer);
                obj.text("获取验证码").removeClass("btn-disabled");
            }
        }, 1000);

        callback();
    } else {
        return false;
    }
}

//设置setLocalDelay
function setLocalDelay(delay) {
    //location.href作为页面的唯一标识，可能一个项目中会有很多页面需要获取验证码。
    localStorage.setItem("delay_" + location.href, delay);
    localStorage.setItem("time_" + location.href, new Date().getTime());
}

//getLocalDelay()
function getLocalDelay() {
    var LocalDelay = {};
    LocalDelay.delay = localStorage.getItem("delay_" + location.href);
    LocalDelay.time = localStorage.getItem("time_" + location.href);
    return LocalDelay;
}

页面调用 login.html

<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
        <script type="text/javascript" src="js/getcode.js"></script>
        <script>
            $(function() {
                var btn = document.getElementById("btn-getcode");
                //调用监听
                monitor($(btn));
                //点击click
                btn.onclick = function() {
                    //倒计时效果  getCode回调函数  获取验证码api
                    countDown($(this), getCode);
                };

                function getCode() {
                    $.get("http://192.168.50.242:8080/demo/js/json.json", {}, function(res) {
                        if (res.code == 000) {
                            console.log("验证码将发送到你手机");
                        } else {
                            alert(res.message);
                        }
                    });
                }
            });
        </script>

其实原理很简单，就是将倒计时的实时记录在localStorage中，页面刷新的时候判断localStorage的数据。