倒計時

dack 發布于2019-08-21 10:52 / 3388人閱讀

摘要：大多數人說起倒計時都會想起，包括以前的我。比如倒計時秒這種寫法咋一看沒問題，仔細看還沒看不出問題。。個人覺得較好的解決方案就是在頁面的時候重新向服務器請求計時時間

背景

記得以前在老東家曾經遇到的坑，前幾天有朋友提起，記錄一下。

setInterval

大多數人說起倒計時都會想起 setInterval ，包括以前的我。比如倒計時 60 秒

var time = 60;
var timer = setInterval(function(){
   if( --time > 0 ){
       console.log( time );
   }else{
       console.log( "finish" );
       clearInterval(timer);
   }
},1000)

這種寫法咋一看沒問題，仔細看還沒看不出問題。。
時間一長就出bug了。
做個小實驗，在 console 丟下代碼，代碼只有 4 行，然后觀察 console 輸出

var counter = 0;  // 作為參照
setInterval(function(){
     console.log( ++counter % 60,new Date().getSeconds(), new Date().valueOf() );
},1000)

ok，代碼開始跑了。然而這個時候我開始看游戲直播了，反正這玩意短時間看不出結果的。偶爾回頭看看代碼運行的情況

當看著 3 3 5 5 7 7 9 9 11 11 13 13 的時候。我好慌

另外的思路

var Timer = function(sec,callback){
   this.second = sec;                       // 倒計時時間（單位：秒)
   this.counter = 0;                        // 累加器，存儲跳動的次數
   this.timer = null;                       // setTimeout 實例
   this.before = (new Date()).valueOf();    // 開始時間 -- 時間戳，用于比較
   this.loop = function(){                  // 開始倒計時
       this.timer && clearTimeout(this.timer);
       var _this = this;
       this.counter++;
       var offset = this.counter * 1000 - (new Date()).valueOf() + this.before, // 倒計時每秒之間的偏差
           ctimestamp = this.second - this.counter;                             // 實際剩余秒數
       this.timer = setTimeout(function(){
           if( ctimestamp < 1 ){
               typeof callback == "function" && callback( ctimestamp, true );
               return;
           } else{ 
               typeof callback == "function" && callback( ctimestamp, false );
               _this.loop();
           }
       },offset);
   }; 
   this.loop(); // 倒計時開始
   return this; 
};

// 調用
new Timer(2000,function(second,finish){
   console.log( finish ? "finish" : second );
})

最后的話

這種寫法也有一定的隱患，比如用戶在倒計時開始之后修改本地的系統時間，就有可能出現較大的誤差。
個人覺得較好的解決方案就是在頁面 visibilitychange 的時候重新向服務器請求計時時間

云服務器 GPU云服務器倒計時網頁倒計時倒計時插件倒計時程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86320.html

js倒計時小插件－－CountDown.js

摘要：剛寫的開源小插件，在這里宣傳下地址歡迎吐槽一個用來實現簡單頁面倒計時的輕量級工具根據要計時的秒數打開一個顯示剩余時間的倒計時參數放置倒計時的元素要計時的秒數用于給倒計時設置標記可以給多個倒計時設置同一個標記分割時分秒的分割符倒計時結束時執行剛寫的開源小插件，在這里宣傳下 ^_^ github地址：https://github.com/flypie2/Co... 歡迎吐槽 ^_^ Co...

mdluo 2019-08-22 10:34 評論0 收藏0
C語言小項目——計時器（倒計時+報警提示）

摘要：大家對計時器應該不陌生，我們在制定一個計劃時，經常喜歡設置一個倒計時來規定完成時限，等到計時結束，它還會報警提示，今天，我就用語言編寫一個簡易的倒計時計時器。 ...

Lin_YT 2021-11-17 09:33 評論0 收藏0
發送短信驗證，后按鈕倒計時，防止刷新倒計時失效

摘要：一般原理是當點擊發送按鈕時，發送請求到服務器發送短信驗證碼，成功則把發送按鈕設置為不可點擊，并且調用定時器，按鈕顯示倒計時。應用場景在開發發送短信驗證功能時候，要解決一個問題，防止惡意或頻繁發送短信驗證碼問題。一般原理是當點擊發送按鈕時，發送ajax請求到服務器發送短信驗證碼，成功則把發送按鈕設置為不可點擊，并且調用定時器，按鈕顯示倒計時。如果就這樣不對倒計時存儲做處理，那么當刷...

DevWiki 2019-08-19 18:45 評論0 收藏0
發送短信驗證，后按鈕倒計時，防止刷新倒計時失效

摘要：一般原理是當點擊發送按鈕時，發送請求到服務器發送短信驗證碼，成功則把發送按鈕設置為不可點擊，并且調用定時器，按鈕顯示倒計時。應用場景在開發發送短信驗證功能時候，要解決一個問題，防止惡意或頻繁發送短信驗證碼問題。一般原理是當點擊發送按鈕時，發送ajax請求到服務器發送短信驗證碼，成功則把發送按鈕設置為不可點擊，并且調用定時器，按鈕顯示倒計時。如果就這樣不對倒計時存儲做處理，那么當刷...

Rocture 2019-08-01 15:26 評論0 收藏0
JS-異步函數鏈式調用(更新：20181221)

摘要：基數，倒計時進入倒計時進入倒計時進入倒計時進入倒計時進入倒計時倒計數結束執行完畢，結果為，準備進入。 2018-12-21 更新1、簡化調用方式，更貼近普通函數的風格；精簡版戳這里！ 2018-12-05 更新1、支持頭節點入參；2、簡化調用方式； //源碼 function chainedFn(chain,firstFnArguments){ // 入參數據校驗 ... ...

lidashuang 2019-08-21 16:39 評論0 收藏0