獲取驗證碼倒計時優化 頁面刷新實時倒計時

現在很多頁面是需要獲取驗證碼的，但是相信很多頁面是沒有做這樣的優化的，比如下面這個場景：

現在訪問一個注冊頁面，頁面有一個填寫手機號，獲取驗證碼的按鈕，點擊獲取驗證碼按鈕之后，按鈕變成灰色，然后是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的數據。