電商網(wǎng)站，團(tuán)購(gòu)類(lèi)網(wǎng)站很多都有都有秒殺這個(gè)業(yè)務(wù)。秒殺自然涉及前端倒計(jì)時(shí)的問(wèn)題。前端倒計(jì)時(shí)許考慮兩個(gè)問(wèn)題：

1.由于js是單線程的，也就是阻塞的，定時(shí)可定會(huì)不準(zhǔn)。無(wú)論setTimeout()還是setInterval(),都有問(wèn)題；

2、打開(kāi)瀏覽器，然后切換到其他app,再次回到瀏覽器，這期間js可能停止執(zhí)行的問(wèn)題。

本質(zhì)上來(lái)說(shuō)，只需要兩個(gè)時(shí)間點(diǎn)就可以了：當(dāng)前時(shí)間、秒殺開(kāi)始時(shí)間。有了這兩個(gè)數(shù)據(jù)，我們就可以倒計(jì)時(shí)了。兩個(gè)時(shí)間的差值就是我們要倒計(jì)時(shí)的時(shí)間差，每隔1秒減少1/每隔1毫秒減少1。但是，當(dāng)前的時(shí)間不要用new Date(),這是獲取手機(jī)的時(shí)間，如果用戶(hù)修改手機(jī)的時(shí)間，這個(gè)會(huì)跟隨變化的。基于此，當(dāng)前的時(shí)間必須是服務(wù)端傳過(guò)來(lái)的。用戶(hù)每次打開(kāi)網(wǎng)頁(yè)，都會(huì)傳服務(wù)器的當(dāng)前時(shí)間。秒殺開(kāi)始的時(shí)間一般是后臺(tái)配置好的，只要配置了，他就定了。是個(gè)不變的量。

解決方法1：

　　以服務(wù)器的當(dāng)前時(shí)間為倒計(jì)時(shí)的當(dāng)前時(shí)間，上面提到需要考慮的那兩個(gè)問(wèn)題都沒(méi)有解決，如果我們實(shí)時(shí)同步服務(wù)器的當(dāng)前時(shí)間，那么這兩個(gè)問(wèn)題就都解決了。
如何時(shí)時(shí)同步呢？最先想到的是，時(shí)時(shí)調(diào)用一個(gè)后端的接口，這個(gè)接口返回服務(wù)器的當(dāng)前時(shí)間。但實(shí)際上，我們只需要跟服務(wù)器ajax交互就可以了，請(qǐng)求一個(gè)服務(wù)器不存在的資源，我們從返回中拿返回頭，再?gòu)倪@個(gè)頭中取服務(wù)器的當(dāng)前時(shí)間。
這種方法就是不斷的同步服務(wù)器的事件。
詳細(xì)代碼參考：https://www.zhihu.com/question/28896402
https://zhuanlan.zhihu.com/p/20832837?refer=xiaojue

筆者的代碼：

　　var this_start_time//指定秒殺開(kāi)始的時(shí)間點(diǎn)，服務(wù)器傳過(guò)來(lái)的var this_count_down;//時(shí)間差：指定秒殺開(kāi)始時(shí)間減去當(dāng)前時(shí)間。可以先不初始化。//校準(zhǔn)倒計(jì)時(shí)的秒數(shù)函數(shù)function sync(){var xhr = new XMLHttpRequest();xhr.open('get', '/', true);xhr.onreadystatechange = function() {if (xhr.readyState === 3) {var now = xhr.getResponseHeader('Date');var nowTime = new Date(now).valueOf()/1000;//沒(méi)有毫秒值，我們倒計(jì)時(shí)的最小單位是秒。有毫秒，不除以1000this_count_down =this_start_time - nowTime;xhr.abort();}};xhr.send(null);}//先對(duì)this_count_down初始化sync();if(this_count_down>0){setInterval(function(){sync();this_count_down--;},1000) }else{ alert('倒計(jì)時(shí)結(jié)束 ') }

　　

　　以上代碼的欠缺是每次請(qǐng)求服務(wù)器，性能不佳。但好處也顯而易見(jiàn)，3個(gè)用戶(hù)同時(shí)訪問(wèn)頁(yè)面，他們的倒計(jì)時(shí)結(jié)果基本上一樣的，秒殺變得比較公平。當(dāng)服務(wù)器出現(xiàn)問(wèn)題，請(qǐng)求不到服務(wù)器的當(dāng)前時(shí)間，這個(gè)代碼會(huì)有問(wèn)題，但這不是我們考慮的問(wèn)題。

?

解決方法2：

　　還有種解決的辦法，就是計(jì)算每次倒計(jì)時(shí)的誤差，你能知道第n次你倒計(jì)時(shí)的應(yīng)該發(fā)生的時(shí)間，再跟當(dāng)前的時(shí)間對(duì)比，這個(gè)誤差就在下次倒計(jì)時(shí)的時(shí)候考慮進(jìn)去。這樣可以保證誤差不累計(jì)。但是對(duì)于退出瀏覽器的行為，這種其實(shí)是有問(wèn)題的。
這種方法是不斷校準(zhǔn)倒計(jì)時(shí)的周期，而周期不可能為負(fù)數(shù)，治標(biāo)不治本。
詳細(xì)代碼參考：http://www.cnblogs.com/flash3d/archive/2014/05/08/3715600.html

?

2種方法，第1種更好，不會(huì)有任何問(wèn)題。而第2種，筆者實(shí)驗(yàn)的過(guò)程中會(huì)有點(diǎn)問(wèn)題。

轉(zhuǎn)載于:https://www.cnblogs.com/xiaochongchong/p/5982004.html

新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎(jiǎng)！定制產(chǎn)品紅包拿不停！

總結(jié)

以上是生活随笔為你收集整理的前端倒计时不准的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。