快捷導(dǎo)航

js 倒計(jì)時(shí)（高效率服務(wù)器時(shí)間同步）

更新時(shí)間：2017年09月12日 21:54:21 作者：snaildev

首先說(shuō)一下，為什么要服務(wù)器時(shí)間同步，因?yàn)榉?wù)器時(shí)間和本地電腦時(shí)間存在一定的時(shí)間差。有些對(duì)時(shí)效性要求非常高的應(yīng)用，例如時(shí)時(shí)彩開獎(jiǎng)，是不能容忍這種時(shí)間差存在的

方案1：每次倒計(jì)時(shí)去服務(wù)端請(qǐng)求時(shí)間

//開啟定時(shí)器
var timer = setInterval(function () {  
  //執(zhí)行請(qǐng)求，獲取當(dāng)前服務(wù)端時(shí)間并進(jìn)行相應(yīng)操作
}, 1000);

這個(gè)方案對(duì)于稍微有點(diǎn)經(jīng)驗(yàn)的開發(fā)人員來(lái)說(shuō)，都知道是不可取的。因?yàn)檫@會(huì)給服務(wù)器造成無(wú)法想象的壓力，導(dǎo)致應(yīng)用崩潰。在這個(gè)頁(yè)面停留一分鐘，那么請(qǐng)求就發(fā)送了60次，假如此時(shí)有100個(gè)人在訪問這個(gè)頁(yè)面，那么一分鐘就有6000條請(qǐng)求，人數(shù)如果再增長(zhǎng)，這絕對(duì)會(huì)造成不必要的服務(wù)器壓力。并且這個(gè)方案的倒計(jì)時(shí)，也會(huì)存在很大的誤差，因?yàn)檎?qǐng)求存在延遲，跟你的網(wǎng)絡(luò)狀態(tài)也有很大的關(guān)系。

方案2：從服務(wù)端返回以服務(wù)器時(shí)間為基準(zhǔn)的倒計(jì)時(shí)時(shí)間戳

//開啟定時(shí)器
//假設(shè)請(qǐng)求獲取到一個(gè)時(shí)間戳?xí)r間差 dateDiff
var timer = setInterval(function () {
  //每秒會(huì)獲取本地時(shí)間，這樣就算執(zhí)行的周期不準(zhǔn)確 也可以準(zhǔn)確的獲取時(shí)間差
  var countDown = endTime - (+Date.now())/1000 + dateDiff;
  // 倒計(jì)時(shí)頁(yè)面渲染
}, 1000);

優(yōu)點(diǎn)：

在頁(yè)面生命周期中請(qǐng)求一次
準(zhǔn)確度高，就算頁(yè)面打開很久還是保持高準(zhǔn)確度
缺點(diǎn)：

由于每秒獲取當(dāng)前時(shí)間，假如刻意在倒計(jì)時(shí)時(shí)期內(nèi)，修改了本地時(shí)間將會(huì)導(dǎo)致倒計(jì)時(shí)異常。

您可能感興趣的文章:

相關(guān)文章

基于Cesium實(shí)現(xiàn)拖拽3D模型的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Cesium實(shí)現(xiàn)在地圖上添加一個(gè)3D模型，并且可以實(shí)現(xiàn)拖拽效果。文中的示例代碼講解詳細(xì)，感興趣的可以了解一下
2022-06-06
如何用JS解析剪切板里的excel內(nèi)容
這篇文章主要介紹了如何用JS解析剪切板里的excel內(nèi)容，對(duì)解析excel感興趣的同學(xué)，可以參考下
2021-04-04
詳解webpack進(jìn)階之loader篇
本篇文章主要介紹了詳解webpack進(jìn)階之loader篇，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-08-08
BootStrap中Datetimepicker和uploadify插件應(yīng)用實(shí)例小結(jié)
這篇文章主要介紹了BootStrap中Datetimepicker和uploadify插件應(yīng)用實(shí)例小結(jié)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-05-05
微信小程序button標(biāo)簽open-type屬性原理解析
這篇文章主要介紹了微信小程序button標(biāo)簽open-type屬性原理解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-01-01
js獲取單元格自定義屬性值的代碼(IE/Firefox)
js取單元格自定義屬性值，IE和FF下的不同實(shí)現(xiàn)
2010-04-04
JS實(shí)現(xiàn)數(shù)組扁平化的方法分享
數(shù)組扁平化指的是：將一個(gè)多層嵌套的數(shù)組，處理成只有一層的數(shù)組。本文主要和大家介紹了幾個(gè)常用的JS數(shù)組扁平化方法，希望對(duì)大家有所幫助
2023-04-04
JS沙箱模式實(shí)例分析
這篇文章主要介紹了JS沙箱模式,結(jié)合實(shí)例形式分析了JS沙箱模式的原理與實(shí)現(xiàn)方法,需要的朋友可以參考下
2017-09-09
JavaScript轉(zhuǎn)換與解析JSON方法實(shí)例詳解
這篇文章主要介紹了JavaScript轉(zhuǎn)換與解析JSON方法,實(shí)例分析了JavaScript解析json的技巧,并附帶分析了jQuery解析與轉(zhuǎn)換json的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11
JavaScript類型系統(tǒng)之Object詳解
對(duì)象其實(shí)就是一組數(shù)據(jù)和功能的集合。對(duì)象可以通過執(zhí)行new操作符后跟要?jiǎng)?chuàng)建的對(duì)象類型的名稱來(lái)創(chuàng)建。而創(chuàng)建Object類型的實(shí)例并為其添加屬性和（或）方法，就可以創(chuàng)建自定義對(duì)象
2016-01-01