js解決客戶端與服務器時間不一致的問題

 

引出

最近在寫一個項目時，要根據時間進行不同的展示，直接用new Date().getTime()獲取當前時間，結果就出問題了。有些用戶擅自修改自己的本地時間，導致獲取到的時間並不是當前時間，尷尬。

思路

既然如此，首先想到的就是讓本地時間以服務器的時間為基准，只要讓服務器傳一個時間戳過來就可以了。那如何實現動態獲取時間呢？畢竟不能每次獲取時間都到服務器去要吧。一個粗糙的思路，只要知道現在與獲取服務器時間過了多久，然后動態的相加就可以了。那如果記錄時間差呢？

剛開始我想的是，記錄獲取服務器時間時的時間點（gainServerTime），將當前時間點與gainServerTime相減，就可以得到經過了多久。但是，如果用戶在進入頁面之后修改時間的話，就會得到錯誤的時間差，並不能解決問題。

然后我想到了定時器，記錄時間秒數experienceTime，每秒+1，固然會犧牲一定的性能，但問題是我沒想到更好的辦法。

實現

/**
 * 獲取當前時間的對象
 * @param serverTime
 * 服務器時間戳（秒）
*/
function GetNowDate(serverTime){
    this.serverTime = serverTime || new Date().getTime();
    // 記錄經歷時間
    this.experienceTime = 0;
    this.init();
}
​
/**
 * 獲取當前時間戳，毫秒級
 */
GetNowDate.prototype.getTime = function (){
    return this.getDateObject().getTime();
};
​
​
/**
 * 獲取當前時間date對象
 */
GetNowDate.prototype.getDateObject = function(){
    return new Date(this.getNowMilliTime());
};
​
​
// 獲取當前毫秒級時間戳
GetNowDate.prototype.getNowMilliTime = function(){
    return (this.serverTime + this.experienceTime) * 1000;
};
​
// 初始化對象
GetNowDate.prototype.init = function(){
    // 設置定時器，動態增加時間
    var _this = this;
    setInterval(function() {
        _this.experienceTime++;
    }, 1000);
};

當然，看着就有很多問題，之后遇到再完善吧

碼雲地址 https://gitee.com/hujingnb/jsTool