理想Web倒計時器的設計與實現

摘要Web頁面的倒計時程序一般采用JavaScript實現。基于文中分析的多種原因，純粹使用JavaScript無法做到倒計時器的防刷新、防關閉、自校正功能，到目前為止，還未通過搜索引擎檢索到具有以上功能的倒計時器例子。針對這種情況，本文給出了一種結合動態腳本與JavaScript技術的防刷新、防關閉、自校正的Web倒計時程序，在實際項目開發中具有實用價值。

關鍵詞倒計時器；JavaScript；防刷新；防關閉1引言

使用倒計時，可以讓用戶清楚地了解離特定事件還剩余多少時間，因此在搶答系統、在線考試系統、節日倒計時等應用中都使用到倒計時。在Web應用中，一般使用JavaScript來設計倒計時程序。JavaScript中的setInterval()函數可以作為定時器，每隔一段時間執行指定的事件，但是這種定時器由于運行環境的限制，一旦用戶刷新頁面或關閉頁面再打開，倒計時器又會重新計時，另外，由于JavaScript運行速度較慢，自身運行要占用一定時間，這種倒計時器也很難做到精確計時。普通倒計時器的缺陷主要表現在以下幾個方面：

①頁面刷新后重新開始倒計時。

②面關閉再打開后重新開始倒計時。

③無法做到全部客戶端同步。

④計時不精確，無法對自身進行校正。

⑤一旦客戶端修改了計算機時鐘，倒計時將會失敗。

普通倒計時器之所以存在以上問題，究其原因，在于下面幾個方面：

⑴定時器設計技術。Web頁面中的定時器使用JavaScript進行設計，由于HTTP連接不是一種持續連接，完成用戶請求后，連接立即關閉，JavaScript的這種運行環境就決定了它不能記錄用戶的狀態，每當頁面刷新或頁面關閉再打開后，相應JavaScript的變量會重新進行初始化，表現為倒計時重新計時。

⑵JavaScript的運行速度。JavaScript以解釋方法執行，運行速度較編譯型語言慢。倒計時器設計時一般會使用到setInterval(function，interval)函數作為定時器，其中，interval為定時器間隔，單位為毫秒，function為定時器每隔interval指定的時間間隔觸發的動作。如果function中含有復雜運算，并且由于JavaScript的執行速度較慢，定時器就會被拖慢，例如定義的間隔為1000ms，實際運行的間隔可能為1100ms，這樣整個倒計時器的精度就會受到影響。

⑶Web頁面的隨機請求方式。由于用戶的請求是隨機的，不可能要求所有用戶在同一時間打開頁面進行倒計時，所以無法做到所有客戶端的倒計時同步。2防刷新防關閉自校正的倒計時器設計思路

單純使用客戶端頁面中的JavaScript無法設計出理想的Web倒計時程序，必須把動態腳本技術與客戶端的JavaScript結合起來才可以實現符合要求的倒計時器。

由于客戶端顯示的時間各不相同，所以不能作為倒計時器的時間參考，否則無法實現所有客戶端的倒計時同步，但在B/S系統中，服務器的時間對于每一個客戶端來說都是一致的，我們可以把服務器的時間作為倒計時參考時間，實現所有客戶端的同步倒計時。

在動態腳本語言(ASP、PHP、JSP)中可以很方便地取得服務器的當前時間。對于倒計時程序來說，都要指定一個結束時間，可以通過計算出一個服務器當前時間和結束時間之間的時間間隔，這個時間間隔反映了當前服務器時間離倒計時結束時間還有多長時間，無論用戶怎樣刷新、關閉再打開頁面，計算出的這個時間間隔都是與客戶端一致的，這樣就避免了刷新、關閉再打開后倒計時器重新計時的問題。

由于JavaScript是一種解釋型語言，執行速度較編譯型語言慢，每次執行setInterval()函數時每次都會產生一個很小的誤差，雖然這個誤差很小，但是這些小誤差積累起來后卻不容忽視，會嚴重影響倒計時器的精度，進而影響到客戶端的同步。雖然各個客戶端上的時鐘各不相同，但是，我們可以認為所有客戶端計算機的時鐘步進是一致的，即A計算機時鐘產生的1秒時間間隔與B計算機時間產生時間間隔是相同的，所以，我們可以把客戶端計算機時鐘作為觀察倒計時器快慢的參照物，做出setInterval()函數的實際執行時間間隔與本地客戶機時鐘流逝時間間隔的差值，以這個差值作為反饋，修改setInterval()函數的執行間隔，從而達到自校正的目的，實現倒計時器的精確計時。

另外，在使用上述自校正方法時，我們要考慮到在定時器執行時，客戶修改了本地時鐘的情況。一般情況下，我們得到的反饋差值不會太大，這里把1000ms作為閾值，一旦得到的差值大于1000ms，程序會認為客戶修改了本地計算機時鐘，停止自校正。仍使用原來的間隔時間，這樣便解決了這個問題。3代碼實現

根據以上的設計思路，使用JSP作為動態腳本語言，實現了一個防刷新、防關閉、自校正、客戶端調節時鐘不敏感的倒計時器。該倒計時器由兩個文件組成，djs.js中為JavaScript倒計時器的主體，實現倒計時功能；djs.jsp中獲取服務器時間，調用djs.js中的start()方法開始倒計時，并顯示出倒計時結果。/*****djs.jsp*****/<%@pageimport="java.text.SimpleDateFo