受限于js的單線程模式，使用定時器實現倒計時會出現一定程度的時間差，若存在比較耗時的其他任務的話，差值往往是不可接受的，一下分享一種使用setTimeout實現的倒計時效果，思路就是通過引入計數器，判斷計時器延遲執行的時間來調整，盡量讓誤差縮小，不同瀏覽器不同時間段打開頁面倒計時誤差可控制在 1s 以內。

以下是代碼實現：

// 開始線程占用
window.setInterval(function () {
? var j = 0;
? while(j++ < 100000000);
}, 0);
?
//倒計時
const interval = 1000;
var ms = 50000,? // 倒計時時間差，這里測試用50000ms
? count = 0,
? startTime = new Date().getTime();
? if (ms >= 0) { ?
????? var timeCounter = window.setTimeout(countDownStart, interval);???????????????? ?
? }
?
function countDownStart() {
? count++; ?
? var offset = new Date().getTime() - (startTime + count * interval); ?
? var nextTime = interval - offset; ?
? var daytohour = 0;

? if (nextTime < 0) {
??? nextTime = 0
? };

? ms -= interval; ?
?
? console.log("誤差：" + offset + "ms，距離下一次執行：" + nextTime + "ms后，距離活動開始還有：" + ms + "ms");
?
? if (ms < 0) {?? ?
??? window.clearTimeout(timeCounter);
? } else {
??? timeCounter = window.setTimeout(countDownStart, nextTime);
? }
}

由于線程阻塞延遲問題，做了 setTimeout 執行時間的誤差修正，保證 setTimeout 執行時間一致。若凍結時間特別長的，可以在此基礎上擴展處理

總結

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

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