2017年2月25日 星期六

編寫同步計時器


今早出席了同事的婚禮後回家,加班了六小時去開發一個網頁項目。

這個項目只讓指定使用者登入,並會贈送一份優惠。使用者要在指定時間內使用,否則會過期作廢。畫面有計時器給大家知道還餘下多少時間。寫這個網頁的難度在於考慮到不同情況下都要還原應有的狀態。例如:
  1. 當計時器倒數到 20 分鐘時,若用戶按「刷新」鍵,數值需要繼續同步倒數,而不是重頭來過
  2. 使用者的手機跳入睡眠模式 10 分鐘後回到網頁,數值同樣需要繼續同步倒數,即是要減去 10 分鐘
  3. 使用優惠後按返回鍵,程式要知道狀況已經更新,不再顯示計時器。如此類推

就第一點,我的做法是使用 PHP 去生成 HTML 碼,並在 PHP 中計算出尚餘秒數,把數值插入 HTML 內。

至於第二點,我用 visibilityChange 事件去記錄離開瀏覽器的時間,並在返回時計算一下失去多少時間,再更新計時器。
document.addEventListener("visibilitychange", handleVisibilityChange, false);
var _lastFired = null;
function handleVisibilityChange()  {
 if (document.hidden)  {

  _lastFired = new Date().getTime();
 } else  {
  if (_lastFired != null)  {

   var currentFired = new Date().getTime();
   var different = (currentFired-_lastFired);
   var second = parseInt(different/1000);

   //  TODO: Update timer or values
  }
 }
}

最後,第三點,同樣也是在 PHP 動手腳,加入以下指令,避免緩衝:
header("Cache-Control: no-cache, must-revalidate, no-store, max-age=0");
header("Pragma: no-cache");
header("Expires: Tue, 10 Mar 1987 00:00:00 GMT");

沒有留言: