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

• 2019 年 12 月 31 日
• 筆記

引出

最近在寫一個項目時，要根據時間進行不同的展示，直接用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