很多剛開始用 JavaScript 的開發者，會覺得 setTimeout 是個讓代碼“等會兒再跑”的簡單工具。

但實際用起來，常常發現它不那么聽話：明明設定了1秒后執行，結果卻等了好幾秒才來，或者干脆沒動靜。

這背后的原因，弄明白了其實也不復雜。這篇文章就講講 setTimeout 到底是怎么工作的，以及為什么它有時會“遲到”或“缺席”，幫你避免常見的坑。

1. 最基礎的誤解：setTimeout(fn, 1000) 不等于“1秒后準時執行”

別被參數名字騙了。setTimeout 的真實意思是：“至少等1000毫秒后，把這個函數 fn 放進一個待辦事項列表（任務隊列）里排隊。等當前手頭所有活兒都干完了，再輪到它執行。”

看個簡單例子就懂了：

console.log("開始");
setTimeout(() => { console.log("定時器到了！"); }, 0); // 延遲設為0
console.log("結束");

輸出順序是：

開始
結束
定時器到了！

為什么 0 秒延遲也沒立刻執行？因為 setTimeout 的回調函數（就是那個打印“定時器到了！”的函數）被放進隊列后，必須等到當前正在跑的代碼（就是打印“開始”和“結束”的那段）全部執行完畢，主線程閑下來了，才會去隊列里把它拿出來執行。即使延遲是0，也要排隊。

2. 主線程忙不過來，定時器就得一直等（延遲漂移）

JavaScript 在一個線程里干活（單線程）。如果這個線程被其他事情卡住了，setTimeout 設定的時間到了也沒用，回調函數只能在隊列里干等著。

看這個例子：

console.log("開始");

setTimeout(() => { console.log("Timeout!"); }, 1000); // 計劃1秒后執行

const startTime = Date.now();
while (Date.now() - startTime < 3000) { // 模擬一個耗時3秒的復雜計算
// 這里啥也不干，就是空等3秒，占住主線程
}

console.log("結束");

輸出順序和大概時間是：

開始
（這里卡頓3秒...）
結束
Timeout! (在 "開始" 打印后大約3秒多才出現)

雖然我們設定了1秒后執行 console.log("Timeout!")，但主線程被那個 while 循環死死占住了整整3秒。

定時器的時間（1秒）到了，回調函數被放進了隊列，但只能眼巴巴等著主線程空閑。

直到3秒后循環結束，打印了“結束”，主線程才空閑下來，這時它才去隊列里拿出回調函數執行。結果就是，1秒的延遲實際變成了3秒多。這就是所謂的“延遲漂移”。

3. 用 setTimeout 搞循環定時？小心誤差越來越大

有時候你想每隔1秒重復做點事，可能這樣寫：

functiondoSomething() {
console.log("干活了...");
// 假設這里可能也有點耗時操作...
setTimeout(doSomething, 1000); // 干完再計劃下一次
}
doSomething(); // 啟動

這個寫法的問題是：setTimeout 是在 doSomething 函數執行完之后，才計劃下一次執行。

如果 doSomething 函數本身執行需要時間（比如200毫秒），那么兩次執行之間的間隔就變成了 1000毫秒 + 200毫秒 = 1200毫秒。時間一長，這個誤差會累積，定時就越來越不準了。

想更準一點怎么辦？

setInterval： 這個函數就是設計來重復執行的。它會嘗試每隔指定的時間（比如1000ms）就把回調函數放進隊列一次。

但是，它有個問題叫“累積效應”：如果回調執行時間比間隔時間長，那么下一次回調會立刻執行（或者連續堆積起來），而不是等間隔時間。所以它也不是絕對精確。

requestAnimationFrame (做動畫首選)： 瀏覽器專門為流暢動畫設計的。它會在每次屏幕刷新前調用你的函數（通常是每秒60次）。

用它做動畫最合適，能保證流暢度，并且瀏覽器在標簽頁不可見時會自動暫停，省資源。

基于時間差計算： 對于需要精確時間間隔但又不能用 requestAnimationFrame 的情況（比如不是動畫），可以在每次回調里記錄實際過去的時間，然后計算下一次需要執行的時間點。這能減少累積誤差。

4. 我的定時器怎么根本沒執行？

如果 setTimeout 的回調函數壓根沒跑，通常不是語法錯誤，而是這些情況：

頁面或組件卸載了： 在 react, vue 這些框架里，如果你在一個組件里設置了定時器，但組件被銷毀（比如頁面跳轉、組件隱藏）時沒清除它，定時器雖然可能還在，但回調函數執行時組件狀態可能已經無效了，導致看起來沒執行，甚至報錯。

關鍵：組件卸載前務必用 clearTimeout 清理定時器！

被清除了： 你或者某個庫的代碼主動調用了 clearTimeout，傳入了正確的定時器ID。

瀏覽器標簽頁在后臺： 為了省電和省資源，現代瀏覽器（Chrome, Firefox, Safari 等）會對后臺標簽頁（不是當前你看的那個標簽）里的定時器進行“節流”。

延遲很短（比如幾秒）的定時器可能被延遲執行，非常短的（如動畫用的）可能被暫停。

Chrome 對后臺標簽頁的非活動定時器，延遲時間可能被限制到至少1分鐘（1000ms以上）甚至更長（如10分鐘）！當你切回標簽頁時，它們才會被處理。

環境不同： 你的代碼可能運行在 Web Worker 或 Node.js 環境里，它們處理定時器的機制和瀏覽器主線程不完全一樣。

5. 循環里的定時器和閉包陷阱（為什么都打印5？）

這是一個非常經典的坑：

for(vari=0;i<5;i++) {
setTimeout(function() {
console.log(i);//期待0,1,2,3,4？實際輸出：5,5,5,5,5
    }, 1000);
}

為什么輸出5個5？

var 聲明的 i 是函數作用域（在這個例子里相當于全局作用域），不是塊級作用域。

循環飛快地跑了5次，創建了5個定時器（都設定了1秒后執行）。

循環結束后，i 的值已經是 5。

1秒后（或者更久，看主線程忙不忙），5個定時器的回調函數開始執行。

它們訪問的都是循環結束后同一個 i，也就是 5。

怎么修？兩種常用方法：

用 let（推薦）： let 是塊級作用域。每次循環都會創建一個新的 i，每個定時器回調都綁定了自己循環那次的那個 i 的值。

for (let i = 0; i < 5; i++) { // 關鍵：把 var 改成 let
setTimeout(function() {
console.log(i); // 正確輸出：0, 1, 2, 3, 4
    }, 1000);
}

用 IIFE（立即執行函數表達式）創建作用域： 如果你不得不用 var，可以用 IIFE 在每次循環時創建一個新的作用域，把當前的 i 值“鎖”住。

for (var i = 0; i < 5; i++) {
    (function(j) { // j 捕獲了當前循環的 i 值
setTimeout(function() {
console.log(j); // 正確輸出：0, 1, 2, 3, 4
        }, 1000);
    })(i); // 立即調用，把當前的 i 傳進去作為 j
}

總結：理解 setTimeout 的關鍵點

簡單說：別把 setTimeout(fn, 1000) 理解成“請1秒后執行這個函數”。

它其實是說：“1秒后，把這個函數加到待辦事項里，等手頭沒活了再處理它?！?手頭有沒有活、活多不多、瀏覽器標簽是不是在前臺，都會影響它最終執行的時間。

理解了這一點，再用 setTimeout 就能避開大部分坑了。