電商網站，團購類網站很多都有都有秒殺這個業務。秒殺自然涉及前端倒計時的問題。前端倒計時許考慮兩個問題：

1.由于js是單線程的，也就是阻塞的，定時可定會不準。無論setTimeout()還是setInterval(),都有問題；

2、打開瀏覽器，然后切換到其他app,再次回到瀏覽器，這期間js可能停止執行的問題。

本質上來說，只需要兩個時間點就可以了：當前時間、秒殺開始時間。有了這兩個數據，我們就可以倒計時了。兩個時間的差值就是我們要倒計時的時間差，每隔1秒減少1/每隔1毫秒減少1。但是，當前的時間不要用new Date(),這是獲取手機的時間，如果用戶修改手機的時間，這個會跟隨變化的。基于此，當前的時間必須是服務端傳過來的。用戶每次打開網頁，都會傳服務器的當前時間。秒殺開始的時間一般是后臺配置好的，只要配置了，他就定了。是個不變的量。

解決方法1：

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

筆者的代碼：

　　var this_start_time//指定秒殺開始的時間點，服務器傳過來的var this_count_down;//時間差：指定秒殺開始時間減去當前時間。可以先不初始化。//校準倒計時的秒數函數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;//沒有毫秒值，我們倒計時的最小單位是秒。有毫秒，不除以1000this_count_down =this_start_time - nowTime;xhr.abort();}};xhr.send(null);}//先對this_count_down初始化sync();if(this_count_down>0){setInterval(function(){sync();this_count_down--;},1000) }else{ alert('倒計時結束 ') }

　　

　　以上代碼的欠缺是每次請求服務器，性能不佳。但好處也顯而易見，3個用戶同時訪問頁面，他們的倒計時結果基本上一樣的，秒殺變得比較公平。當服務器出現問題，請求不到服務器的當前時間，這個代碼會有問題，但這不是我們考慮的問題。

?

解決方法2：

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

?

2種方法，第1種更好，不會有任何問題。而第2種，筆者實驗的過程中會有點問題。

轉載于:https://www.cnblogs.com/xiaochongchong/p/5982004.html

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。