一、問題描述

需要解決的問題很簡單，就是如何在頁面上比較準確的顯示伺服器時間。目前比較常用的方法就是根據基準時間使用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中一 樣進行校準，只不過使用的將是最新的基準值。

具體的程式碼實現如下

1. /*定義*/
2.     var SyncTimer = (function(){    
3.         /*跨頁面資料儲存器*/
4.         //儲存最近一次的客戶端時間，用於在頁面前進、後退時進行時間矯正  
5.         var memoryElementID = 'sync_timer_memory_el';    
6.         //儲存矯正後的最新基準時間，當頁面前進、後退到當前頁面時會以此值為新的基準時間  
7.         var memoryBaseTimeElementID = 'sync_timer_memory_base_time_el';    
8.         document.write('   
9. <input type="text" id="' + memoryElementID + '">');    
10.         document.write('   
11. <input type="text" id="' + memoryBaseTimeElementID + '">');    
12.         return{    
13.             /*  
14.              * @param { Integer } baseTime 基準時間  
15.              * @param { Function } updater 時間更新時的監聽器  
16.              * @param { Integer } interval 校準計算週期時長，預設為200ms。  
17.              * @param { Integer } threshold 兩個檢查週期之間的時間誤差（差值-週期時長）如果大於閾值則視為客戶端時間有調整，預設為500ms。  
18.              */
19.             run: function(baseTime,updater,interval,threshold){    
20.                 interval = interval || 200;    
21.                 threshold = threshold || 500;                       
22.                 var memoryEl = document.getElementById(memoryElementID);    
23.                 var baseTimeEl = document.getElementById(memoryBaseTimeElementID);    
24.                 /*前進、後退或重新整理，則矯正baseTime*/
25.                 if( memoryEl.value != '' ){    
26.                     //計算當前客戶端時間與上次儲存的客戶端時間之差，如果差值超過閾值則更新基準時間  
27.                     var diff = +new Date - parseInt(memoryEl.value);    
28.                     if( Math.abs( diff ) - interval > threshold ){    
29.                         baseTime = parseInt(baseTimeEl.value);    
30.                         baseTime += diff;    
31.                     }    
32.                 }    
33.                 var ct = +new Date;    
34.                 var diff = ct - baseTime;    
35.                 var pt = ct,cct;    
36.                 (function(){    
37.                     cct = +new Date;    
38.                     /*計算當前計算週期與上一個計算週期的時間差，如果差值大於設定的閾值則進行矯正（處理客戶端時間調整的情況）*/
39.                     var secDiff = cct - pt;    
40.                     if( Math.abs( secDiff ) - interval > threshold ){    
41.                         diff += (secDiff - interval);    
42.                     }    
43.                     var fixedTime = cct - diff;    
44.                     updater( fixedTime );    
45.                     pt = memoryEl.value = cct;    
46.                     baseTimeEl.value = fixedTime;    
47.                     setTimeout(arguments.callee,interval);    
48.                 })();    
49.             }    
50.         }    
51.     })();    
52.     /*使用*/
53.     window.onload = function(){    
54.         var serverTime = parseInt($('dateWrapper').getAttribute('date'))*1000;    
55.         SyncTimer.run(serverTime,function(date){    
56.             var d = new Date(date);    
57.             $('dateWrapper').innerHTML = d.format('yyyy-MM-dd hh:mm:ss');    
58.             $('dateWrapper').setAttribute('date',parseInt(date/1000));    
59.         });    
60.     }    

三、總結

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