引言：計時器的困惑
PM：嘿竞滓，你來看一下這個倒計時組件匪燕，為什么時間總是跳得這么不準確轿亮？我們的用戶可是每一秒都在盯著看呢纬凤！
FE：嗯，這個問題我也注意到了笤昨。我猜想可能是因為JavaScript的定時器不夠精確所導(dǎo)致的祖驱。你知道的，JavaScript的定時器并不是真正的實時瞒窒。
PM：不是實時捺僻？那我們的促銷活動豈不是要泡湯了？用戶體驗可不能因為這個而受到影響案汀陵像！
FE：放心吧，我知道這很重要寇壳。我會深入調(diào)查具體原因醒颖，并找到一個解決方案的。我們的倒計時組件會準時如一壳炎，準確無誤泞歉！
PM：那就拜托了！我可不想看到用戶因為這個小bug而離我們而去匿辩。
所以腰耙，讓我們揭開這個“時間誤差”的謎團，并確保我們的倒計時組件能夠精準無誤地幫助用戶倒數(shù)每一秒铲球！
正文：倒計時組件的誤差之謎
當你在開發(fā)這個功能時挺庞，你可能會首先寫出像下面這樣的代碼：
import { FC, useState, useEffect } from "react";
import "./_style.scss";
/** @description 每秒剩余秒數(shù)減1 */
export const CountOne: FC<{
startTime: number;
}> = (props) => {
const { startTime } = props;
const [restSec, setRestSec] = useState(startTime);
useEffect(() => {
// 創(chuàng)建一個定時器，每隔1秒執(zhí)行一次
const inter = setInterval(() => {
// 更新restSec狀態(tài)稼病，每秒減一
setRestSec(oldVal => oldVal - 1);
}, 1000);
return () => {
clearInterval(inter);
};
}, []);
return (
<div className="pub-style">
<p className="pub-style-text">每秒減一方案:</p>
<p className="pub-style-text">
<span className="pub-style-text-span">倒計時秒數(shù):</span>
<span className="pub-style-text-span">{restSec}</span>
</p>
</div>
);
};
每秒剩余秒數(shù)減1选侨，這個邏輯看似并無問題。然而然走，經(jīng)過一段時間的運行援制，或者在電腦合蓋后再運行，你可能會發(fā)現(xiàn)實際值與期望值之間存在較大的偏差芍瑞。
如圖所示晨仑，第一種方案即為執(zhí)行一段時間后上述代碼的執(zhí)行結(jié)果。是不是很離譜拆檬？
這到底是哪里出了問題呢洪己？于是，我把這段代碼拿去詢問ChatGPT秩仆，給出的回答如下：
-
JavaScript定時器的不精確性
- JavaScript中的
setTimeout和setInterval函數(shù)并不能保證完全精確的時間間隔码泛，因為它們受到了事件循環(huán)的影響。如果頁面或者瀏覽器忙于其他任務(wù)澄耍，定時器的回調(diào)可能會被推遲執(zhí)行噪珊。
- JavaScript中的
-
瀏覽器的最小化或標簽頁切換
- 當用戶最小化瀏覽器或切換到其他標簽頁時晌缘，瀏覽器可能會減慢或暫停定時器的回調(diào)，以節(jié)省資源痢站。
-
頁面渲染的性能問題
- 如果頁面存在復(fù)雜的DOM操作或者JavaScript執(zhí)行效率低下磷箕，可能會影響倒計時組件的更新頻率。
怎么辦：倒計時組件的誤差之謎與解決策略
當我們嘗試用JavaScript來實現(xiàn)倒計時功能時阵难，通常會使用setInterval函數(shù)岳枷。然而，setInterval函數(shù)并不能保證完全精確的時間間隔呜叫，因為它的執(zhí)行受到很多因素的影響空繁，比如頁面的渲染速度、瀏覽器的性能等朱庆。
第一種方案：使用Web Workers
Web Workers允許我們在后臺線程中運行代碼盛泡，避免了主線程的擁堵，可以提高定時器的準確性娱颊。但是傲诵，Web Workers無法訪問DOM，因此不適用于需要實時渲染的場景箱硕。
第二種方案：時間戳比對
我們可以通過存儲一個初始時間戳拴竹，并在每次回調(diào)中比對當前時間戳，以計算真實經(jīng)過的時間剧罩。這種方法比單純依賴setInterval的回調(diào)更為精確栓拜。修改后的代碼如下：
import { FC, useState, useEffect } from "react";
import { getUnixTime } from "date-fns";
import "./_style.scss";
/** @description 每秒都用deadline - now */
export const CountUseNow: FC<{
deadlineTime: number;
}> = (props) => {
const { deadlineTime } = props;
const [restSec, setRestSec] = useState(
deadlineTime - getUnixTime(Date.now())
);
useEffect(() => {
// 每隔1秒（1000毫秒）執(zhí)行一次
// setRestSec(deadlineTime - getUnixTime(Date.now()))
// 操作，使得restSec的值每秒更新一次
const inter = setInterval(() => {
setRestSec(() => deadlineTime - getUnixTime(Date.now()));
}, 1000);
return () => {
clearInterval(inter);
};
}, []);
return (
<div className="pub-style">
<p className="pub-style-text">每秒都用deadline減now方案:</p>
<p className="pub-style-text">
<span className="pub-style-text-span">倒計時秒數(shù):</span>
<span className="pub-style-text-span">{restSec}</span>
</p>
</div>
);
};
以上代碼中惠昔，我們使用了getUnixTime函數(shù)來獲取當前時間的秒級時間戳菱属，然后將其與設(shè)定的截止時間進行比對，從而得到剩余時間舰罚。
第三種方案：使用requestAnimationFrame
對于需要高頻更新的倒計時，我們可以使用requestAnimationFrame薛耻。它能保證在每次瀏覽器重繪之前更新時間营罢，從而提高準確性。但是饼齿，在非動畫場景下饲漾，使用頻率較低。
第四種方案：優(yōu)化頁面性能
確保DOM操作和JavaScript執(zhí)行盡可能高效缕溉，以減少對倒計時組件更新的干擾考传。這需要針對具體的應(yīng)用場景進行優(yōu)化，無法作為通用的解決方案证鸥。
經(jīng)過比較僚楞，第二種方案修改成本較低且滿足預(yù)期勤晚，更適合在大多數(shù)情況下使用。當然泉褐，具體選擇哪種方案還需要根據(jù)實際的應(yīng)用場景來決定赐写。
結(jié)論：追求精準的倒計時
我們探討了前端開發(fā)中倒計時組件出現(xiàn)誤差的原因，并提供了幾種解決方法膜赃。通過這些技術(shù)手段挺邀，我們可以極大地提高倒計時的準確性，確保用戶體驗不受影響√現(xiàn)在端铛，我們可以告別那些“崩潰中”的時刻，迎接一個更加精準和可靠的倒計時體驗疲眷。
致謝
ChatGPT 與 文心一言對本文亦有貢獻
