JS中的setTimeout和setInterval有什么區(qū)別？

在JavaScript中，setTimeout和setInterval看起來都是用來控制代碼執(zhí)行時間的，但它們的行為方式其實完全不同。

簡單來說：

• setTimeout是“只執(zhí)行一次”的定時器。
• setInterval是“重復(fù)執(zhí)行”的定時器。

接下來我們從幾個常見使用場景出發(fā)，講講它們的區(qū)別和用法。

1. 執(zhí)行次數(shù)不同

這是兩者最根本的區(qū)別：

• setTimeout 只會在指定時間后執(zhí)行一次任務(wù)。
  比如你想等3秒后彈出一個提示框，就可以用它：

  setTimeout(() => {   alert('3秒到了'); }, 3000);

• setInterval 會每隔指定時間就執(zhí)行一次任務(wù)，直到你手動清除為止。 比如你想每秒更新一次頁面上的時間顯示：

  const timer = setInterval(() => {   console.log(new Date().toLocaleTimeString()); }, 1000);

如果你不調(diào)用 clearTimeout(timer) 或 clearInterval(timer)，那這個任務(wù)就會一直執(zhí)行下去。

2. 定時精度與異步特性

JavaScript的定時器并不是精確的。這是因為JS是單線程語言，所有任務(wù)都得排隊執(zhí)行。

• 即使你設(shè)置了0毫秒，setTimeout(fn, 0)也不是立即執(zhí)行，而是等當(dāng)前執(zhí)行棧清空后再運行。
• 如果主線程很忙（比如在做復(fù)雜計算），那不管是setTimeout還是setInterval都會被“推遲”。

舉個例子：

console.log('Start');  setTimeout(() => {   console.log('Timeout'); }, 0);  for (let i = 0; i < 1e9; i++) {} // 模擬耗時操作  console.log('End');

這段代碼會先打印 Start 和 End，最后才執(zhí)行那個看似“立刻”的 setTimeout 回調(diào)。

3. 使用建議和注意事項

在實際開發(fā)中，這兩個函數(shù)各有適用場景，也有些容易踩坑的地方：

? 推薦使用場景：

• setTimeout：適合延遲執(zhí)行、防抖（debounce）、遞歸調(diào)用替代循環(huán)。
• setInterval：適合輪詢、動畫幀控制、倒計時等需要周期性執(zhí)行的任務(wù)。

?需要注意的問題：

• 不要依賴定時器做高精度任務(wù)，比如音視頻同步。
• 避免多個定時器嵌套不清，容易造成內(nèi)存泄漏或邏輯混亂。
• 在組件卸載或頁面關(guān)閉前記得清除定時器，否則可能引發(fā)錯誤或性能問題。

比如在React組件里：

useEffect(() => {   const id = setInterval(fetchData, 5000);   return () => clearInterval(id); // 清除定時器 }, []);

總結(jié)一下

setTimeout適合一次性延時操作，setInterval適合重復(fù)執(zhí)行。它們的底層機制一樣，但行為差異很大。理解它們的工作方式，能幫你寫出更穩(wěn)定、可控的異步邏輯。

基本上就這些，不復(fù)雜但容易忽略細節(jié)。