亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

倒計(jì)時(shí)

dack / 3523人閱讀

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

背景

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

setInterval

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

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

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

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

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

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

另外的思路 
var Timer = function(sec,callback){
   this.second = sec;                       // 倒計(jì)時(shí)時(shí)間（單位：秒)
   this.counter = 0;                        // 累加器，存儲(chǔ)跳動(dòng)的次數(shù)
   this.timer = null;                       // setTimeout 實(shí)例
   this.before = (new Date()).valueOf();    // 開始時(shí)間 -- 時(shí)間戳，用于比較
   this.loop = function(){                  // 開始倒計(jì)時(shí)
       this.timer && clearTimeout(this.timer);
       var _this = this;
       this.counter++;
       var offset = this.counter * 1000 - (new Date()).valueOf() + this.before, // 倒計(jì)時(shí)每秒之間的偏差
           ctimestamp = this.second - this.counter;                             // 實(shí)際剩余秒數(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(); // 倒計(jì)時(shí)開始
   return this; 
};

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

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

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

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

相關(guān)文章

  • js倒計(jì)時(shí)小插件－－CountDown.js

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

    mdluo 評論0 收藏0

  • C語言小項(xiàng)目——計(jì)時(shí)器（倒計(jì)時(shí)+報(bào)警提示）

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

    Lin_YT 評論0 收藏0

  • 發(fā)送短信驗(yàn)證，后按鈕倒計(jì)時(shí)，防止刷新倒計(jì)時(shí)失效

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

    DevWiki 評論0 收藏0

  • 發(fā)送短信驗(yàn)證，后按鈕倒計(jì)時(shí)，防止刷新倒計(jì)時(shí)失效

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

    Rocture 評論0 收藏0

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

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

    lidashuang 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<