背景:
某項目前端使用HTML5,後端提供HTTP接口,某個功能是前端顯示合約倒計時(合約生效日期及結束日期配置在DB),容許少許偏差javascript
方案1:
後端提供的接口只返回合約結束時間,前端直接將後端返回的結束時間減去客戶端時間即爲倒計時
陷阱:客戶端的時間用戶是能夠隨意改的,甚至用戶的時區都有可能不一樣,因此這種方法統計出來的倒計時必然是不能獲得保證的
方案2:
後端提供的接口只返回由後端計算出來的倒計時(雖而後端機器可能有多臺,但跟用方案1比畢竟機器可控),前端直接使用該倒計時,使用setInterval()函數
但是運行了一段時間以後,時間卻不許了,爲何呢?原來:js實質是單線程的,通過一段時間後,倒計時時間差別會變大而慢慢變得不許。若是趕上機器休眠那差距就更大了。前端
方案3:
後端返回結束時間+後端計算出來的倒計時,前端也計算倒計時與服務端算出來的做爲偏移量,每一個循環取前端取結束時間+偏移量-當前時間,算法以下java
//endTime和leftTimeMillions來自後端,分別表明結束時間與剩餘時間毫秒數 var currentTime = new Date().getTime(); //先後端時間誤差量 var offset = endTime - currentTime - leftTimeMillions; //倒計時 var leftTimeResult = endTime - currentTime + offset;