成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

倒計時

dack / 3394人閱讀

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

背景

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

setInterval

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

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

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

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

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

當(dāng)看著 3 3 5 5 7 7 9 9 11 11 13 13 的時候。 我好慌

另外的思路 
var Timer = function(sec,callback){
   this.second = sec;                       // 倒計時時間（單位：秒)
   this.counter = 0;                        // 累加器，存儲跳動的次數(shù)
   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;                             // 實際剩余秒數(shù)
       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; 
};

// 調(diào)用
new Timer(2000,function(second,finish){
   console.log( finish ? "finish" : second );
})
最后的話

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86320.html

相關(guān)文章

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

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

    mdluo 評論0 收藏0

  • C語言小項目——計時器（倒計時+報警提示）

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

    Lin_YT 評論0 收藏0

  • 發(fā)送短信驗證，后按鈕倒計時，防止刷新倒計時失效

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

    DevWiki 評論0 收藏0

  • 發(fā)送短信驗證，后按鈕倒計時，防止刷新倒計時失效

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

    Rocture 評論0 收藏0

  • JS-異步函數(shù)鏈?zhǔn)秸{(diào)用(更新：20181221)

    摘要：基數(shù)，倒計時進入倒計時進入倒計時進入倒計時進入倒計時進入倒計時倒計數(shù)結(jié)束執(zhí)行完畢，結(jié)果為，準(zhǔn)備進入。 2018-12-21 更新1、簡化調(diào)用方式，更貼近普通函數(shù)的風(fēng)格；精簡版戳這里！ 2018-12-05 更新1、支持頭節(jié)點入?yún)ⅲ?、簡化調(diào)用方式； //源碼 function chainedFn(chain,firstFnArguments){ // 入?yún)?shù)據(jù)校驗 ... ...

    lidashuang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<