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 發布！