一、問題描述

需要解決的問題很簡單，就是如何在頁面上比較準確的顯示伺服器時間。目前比較常用的方法就是根據基準時間使用setTimeout或 setInterval來計算最新的時間，這樣的問題在於setTimeout與setInterval的時間精度比較低，經測試一分鐘大概能相差幾秒 （與電腦效能以及執行的任務也相關），這樣的精度在某些需求下是無法滿足的。除此之外，如果要獲得比較準確的時間可以定期與伺服器進行校準，只是這樣實現 的成本大一些。

本文嘗試了一種改良的客戶端實現時間同步的方式，具有以下的特點：

• 1. 根據基準時間進行純客戶端計算，無需伺服器校準
• 2. 時間精度與客戶端系統時間保持一致
• 3. 不受客戶端時間與伺服器時間不同步造成的影響
• 4. 不受客戶端系統時間發生修改造成的影響
• 5. 不受頁面前進後退造成的影響

二、具體實現

1. 為了解決原方案中的時間精度問題，這裡不再使用setTimeout和setInterval來直接計算時間，而是直接使用客戶端時間(CT)。不過客戶 端時間很可能與伺服器時間(ST)不同步，這需要在頁面載入的時候計算出客戶端與伺服器的時間差值(ΔT)，這樣只需在客戶端時間上做一下修正即可得到準 確的伺服器時間(ST’ = CT - ΔT)。

2. 由於客戶端時間很可能被使用者修改，因此直接按照步驟1中的方式計算，一旦使用者修改了時間，計算出來的伺服器時間也將隨之發生變化。這就需要檢測出客戶端時 間的變化並消除這個變化。檢測的方法很簡單，即在每個計算週期(T)都將當時的客戶端時間(CT2)與上一個週期的客戶端時間(CT1)做比較，一旦兩個 週期的差值(ΔT’ = CT2 - CT1 - T)大於某個預設值(S)時就將差值(ΔT’)加入到ΔT中，即此時的ΔT = ΔT + ΔT’。之所以需要設定一個預設值，是因為每個週期的時間本身不是固定的(依賴於setTimeout)，因此ΔT’並不會等於0，如果每次都將 setTimeout造成的誤差作為CT與ST之間的誤差將會造成計算不準確。經過以上的計算，使用者修改時間後將不會對計算結果產生影響。

3. 經JK提醒，完成以上兩步還有一個問題，當用戶離開當前頁面之後後退回頁面時，時間計算不準確。問題在於基準時間是伺服器給的，在第一次進入頁面的時候確 定，當用戶後退回當前頁面時，基準時間並沒有變，這樣會導致重新從過期的基準時間開始計算，導致不準確。需要解決這個問題就是需要解決跨頁面的資料儲存問 題，這在之前的《Ajax應用中瀏覽器歷史的相容性解決方案》一 文中已經說明，即通過表單元素來記憶。具體的實現方案是，頁面第一次載入時建立兩個input，一個用於儲存最近一次的客戶端時間，一個用於儲存最近一次 的基準時間。如果發現已經存在input（前進、後退、非強制重新整理）則比較上一次的客戶端時間與當前客戶端時間，如果其差值大於某個預設值則像步驟2中一 樣進行校準，只不過使用的將是最新的基準值。

具體的程式碼實現如下

 /*定義*/    
    var SyncTimer = (function(){    
        /*跨頁面資料儲存器*/    
        //儲存最近一次的客戶端時間，用於在頁面前進、後退時進行時間矯正    
        var memoryElementID = 'sync_timer_memory_el';    
        //儲存矯正後的最新基準時間，當頁面前進、後退到當前頁面時會以此值為新的基準時間    
        var memoryBaseTimeElementID = 'sync_timer_memory_base_time_el';    
        document.write('   
<input type="text" id="' + memoryElementID + '">');    
        document.write('   
<input type="text" id="' + memoryBaseTimeElementID + '">');    
        return{    
            /*  
             * @param { Integer } baseTime 基準時間  
             * @param { Function } updater 時間更新時的監聽器  
             * @param { Integer } interval 校準計算週期時長，預設為200ms。  
             * @param { Integer } threshold 兩個檢查週期之間的時間誤差（差值-週期時長）如果大於閾值則視為客戶端時間有調整，預設為500ms。  
             */    
            run: function(baseTime,updater,interval,threshold){    
                interval = interval || 200;    
                threshold = threshold || 500;                       
    
                var memoryEl = document.getElementById(memoryElementID);    
                var baseTimeEl = document.getElementById(memoryBaseTimeElementID);    
    
                /*前進、後退或重新整理，則矯正baseTime*/    
                if( memoryEl.value != '' ){    
                    //計算當前客戶端時間與上次儲存的客戶端時間之差，如果差值超過閾值則更新基準時間    
                    var diff = +new Date - parseInt(memoryEl.value);    
                    if( Math.abs( diff ) - interval > threshold ){    
                        baseTime = parseInt(baseTimeEl.value);    
                        baseTime += diff;    
                    }    
                }    
    
                var ct = +new Date;    
                var diff = ct - baseTime;    
                var pt = ct,cct;    
    
                (function(){    
                    cct = +new Date;    
                    /*計算當前計算週期與上一個計算週期的時間差，如果差值大於設定的閾值則進行矯正（處理客戶端時間調整的情況）*/    
                    var secDiff = cct - pt;    
                    if( Math.abs( secDiff ) - interval > threshold ){    
                        diff += (secDiff - interval);    
                    }    
                    var fixedTime = cct - diff;    
                    updater( fixedTime );    
                    pt = memoryEl.value = cct;    
                    baseTimeEl.value = fixedTime;    
                    setTimeout(arguments.callee,interval);    
                })();    
            }    
        }    
    })();    
    /*使用*/    
    window.onload = function(){    
        var serverTime = parseInt($('dateWrapper').getAttribute('date'))*1000;    
    
        SyncTimer.run(serverTime,function(date){    
            var d = new Date(date);    
            $('dateWrapper').innerHTML = d.format('yyyy-MM-dd hh:mm:ss');    
            $('dateWrapper').setAttribute('date',parseInt(date/1000));    
        });    
    }    

三、總結

• 總體實現還是比較麻煩，如果對時間精度要求不高可不必這麼做。
• 還有一種情況未解決：使用者從當前頁面進入別的頁面後修改客戶端時間，之後後退到當前頁面，此時時間計算不正確，但是暫時未找到解決方案。
• 此外發現兩個有意思的東西：1. 在Firefox下如果將客戶端時間改慢會導致setInterval停止執行，而setTimeout則不會；2. 在Chrome中，當用戶修改了客戶端時間後，setInterval中取到的Date的值並不會隨使用者的修改而修改。
• 下面寫上我修改後的程式碼，可以直接貼上使用的倒計時程式碼，而不是系統時間的程式碼

• <script>
  			/*定義*/    
  		var SyncTimer = (function(){    
          /*跨頁面資料儲存器*/    
          //儲存最近一次的客戶端時間，用於在頁面前進、後退時進行時間矯正    
          var memoryElementID = 'sync_timer_memory_el';    
          //儲存矯正後的最新基準時間，當頁面前進、後退到當前頁面時會以此值為新的基準時間    
          var memoryBaseTimeElementID = 'sync_timer_memory_base_time_el';    
          document.write('<input type="hidden" id="' + memoryElementID + '">');    
          document.write('<input type="hidden" id="' + memoryBaseTimeElementID + '">');    
          return{    
              /*  
               * @param { Integer } baseTime 基準時間  
               * @param { Function } updater 時間更新時的監聽器  
               * @param { Integer } interval 校準計算週期時長，預設為200ms。  
               * @param { Integer } threshold 兩個檢查週期之間的時間誤差（差值-週期時長）如果大於閾值則視為客戶端時間有調整，預設為500ms。  
               */    
              run: function(baseTime,updater,interval,threshold){    
                  interval = interval || 200;    
                  threshold = threshold || 500;                       
      
                  var memoryEl = document.getElementById(memoryElementID);    
                  var baseTimeEl = document.getElementById(memoryBaseTimeElementID);    
      
                  /*前進、後退或重新整理，則矯正baseTime*/    
                  if( memoryEl.value != '' ){    
                      //計算當前客戶端時間與上次儲存的客戶端時間之差，如果差值超過閾值則更新基準時間    
                      var diff = +new Date - parseInt(memoryEl.value);    
                      if( Math.abs( diff ) - interval > threshold ){    
                          baseTime = parseInt(baseTimeEl.value);    
                          baseTime += diff;    
                      }    
                  }    
      
                  var ct = +new Date;    
                  var diff = ct - baseTime;    
                  var pt = ct,cct;    
      
                  (function(){    
                      cct = +new Date;    
                      /*計算當前計算週期與上一個計算週期的時間差，如果差值大於設定的閾值則進行矯正（處理客戶端時間調整的情況）*/    
                      var secDiff = cct - pt;    
                      if( Math.abs( secDiff ) - interval > threshold ){    
                          diff += (secDiff - interval);    
                      }    
                      var fixedTime = cct - diff;    
                      updater( fixedTime );    
                      pt = memoryEl.value = cct;    
                      baseTimeEl.value = fixedTime;    
                      setTimeout(arguments.callee,interval);    
                  })();    
              }    
          }    
  		})();    
      /*使用*/    
      window.onload = function(){    
          var serverTime = parseInt({$time})*1000;    
      
          SyncTimer.run(serverTime,function(date){
  		  var intDiff = (1437364800+18000)*1000 - date;
  			intDiff =  Math.floor(intDiff / 1000);
  			var day=0,
  			hour=0,
  			minute=0,
  			second=0;//時間預設值		
  			if(intDiff > 0){
  				day = Math.floor(intDiff / (60 * 60 * 24));
  				hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
  				minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
  				second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
  			}
  			if (minute <= 9) minute = '0' + minute;
  			if (second <= 9) second = '0' + second;-
  			$('#day_show').html(day+"天");
  			$('#hour_show').html('<s id="h"></s>'+hour+'時');
  			$('#minute_show').html('<s></s>'+minute+'分');
  			$('#second_show').html('<s></s>'+second+'秒');
  			if(minute == '00' && second == '00' && hour == '0' && day == '0'){
  				temp = window.clearInterval(temp);
  				$('#now').removeClass('btn-danger');
  				$('#now').addClass('btn-success');
  			}
          });    
      }    
  		</script>