moment.js 默認使用服務器時間

在前端使用Date對象獲取當前時間的時候，該時間是客戶端的時間。可是該時間能夠被用戶修改，因此咱們通常狀況下並不想要這個時間。若是每一次獲取時間的時候都請求一下服務器，那麼將會對服務器形成沒必要要的壓力，咱們也不想這麼作。在網上找了一圈以後，發現了一些解決方案，就在這裏總結一下

1.當系統被用戶第一次打開的時候，發送請求（不必寫一個專門獲取時間的API），根據http的相應頭Date字段獲取服務器時間。此時與客戶端時間作差，並將差值記錄下來。

2.爲了防止客戶端時間被用戶修改，咱們每隔2s(這個自定義吧)獲取一下客戶端時間，並將上一個時間和當前時間作差，看和2s差的大不大，正常狀況下也就是幾十毫秒的差值，咱們在這裏比方設爲 1s。若是差值大於1s，咱們就認爲客戶端時間被修改了，咱們此時獲取一下前一個時間和當前時間的差值再減去2s就是修改時候後的差值。

3.moment.js內部獲取時間是使用的moment.now方法，咱們把這個方法自定義一下就能夠了

如下是代碼實現：

var diff = 0;           // 記錄服務器和客戶端的時間差值
    var lastTime;           // 記錄上一次時間
    $(function(){
        $.ajax({
            url: apiURL,
        }).always(function(res, state, xhr){
            var serverTime = new Date(xhr.getResponseHeader("Date")).getTime();
            var localTime = +new Date;
            diff = serverTime - localTime;
            lastTime = localTime;
            var InvertialMillSeconds = 2000;
            var maxMillSeconds = 1000;
            // 每InvertialSeconds毫秒檢測一次當前時間，
            // 若差值大於maxMillSeconds那麼能夠判斷出客戶端時間被修改了
            setTimeout(function(){
                var nowTime = +new Date;
                var InverDiff = nowTime - (lastTime + InvertialMillSeconds);
                if(Math.abs(InverDiff) > maxMillSeconds){
                    diff += InverDiff;
                }
                lastTime = nowTime;
                setTimeout(arguments.callee, InvertialMillSeconds);
            }, InvertialMillSeconds);
        })
        
    })

moment.now原本是這個樣子的

var now = function() {
        return Date.now ? Date.now() : +(new Date());
    };

咱們在引入moment.js以後，從新修改該值爲

if (window.moment && window.moment.now) {
        moment.now = function(){
            return Date.now ? Date.now()+top.diff : (new Date().getTime() + top.diff);
        }
    }

到此，大功告成！

本文由博客一文多發平臺 OpenWrite 發佈！