快捷導(dǎo)航

JS中的兩大定時器示例詳解

更新時間：2026年03月24日 16:20:23 作者：我叫黑大帥

JavaScript中有兩種定時器分別是setTimeout（一次性定時器）和setInterval（循環(huán)定時器）,本文通過通過實例代碼講解兩大定時器的使用,感興趣的朋友跟隨小編一起看看吧

setTimeout：一次性定時器

等待指定時間后，只執(zhí)行一次

// 寫法1：直接寫函數(shù)
setTimeout(function() {
  // 這里寫要執(zhí)行的代碼
}, 延遲時間(毫秒));
// 寫法2：箭頭函數(shù)（更簡潔）
setTimeout(() => {
  // 要執(zhí)行的代碼
}, 延遲時間);
// 3秒后彈出提示
setTimeout(() => {
  alert('3秒到了！');
}, 3000);
// 5秒后把按鈕文字改成“已過期”
const btn = document.getElementById('btn');
setTimeout(() => {
  btn.innerText = '已過期';
  btn.disabled = true;
}, 5000);

怎么清除它？ clearTimeout

// 先把定時器存到一個變量里
const timer = setTimeout(() => {
  alert('我不會執(zhí)行了');
}, 3000);
// 點擊按鈕取消定時器
document.getElementById('cancelBtn').onclick = function() {
  clearTimeout(timer); // ?? 取消定時器
  alert('定時器已取消！');
};

setInterval：循環(huán)定時器

每隔指定時間就執(zhí)行一次，無限循環(huán)，直到你手動停止。

<!--顯示點擊時間-->
<div id="clock"></div>
<script>
  setInterval(() => {
  // 這里寫要重復(fù)執(zhí)行的代碼
  }, 間隔時間(毫秒));
  const clock = document.getElementById('clock');
  // 每隔1秒更新一次時間
  setInterval(() => {
    const now = new Date();
    const time = now.toLocaleTimeString(); // 獲取當(dāng)前時間字符串
    clock.innerText = time;
  }, 1000);
</script>

怎么清除它？ clearInterval

<div>倒計時：<span id="count">10</span>秒</div>
<button id="stopBtn">停止倒計時</button>
<script>
  let count = 10;
  const countSpan = document.getElementById('count');
  // 把定時器存到變量里
  const timer = setInterval(() => {
    count--;
    countSpan.innerText = count;
    // 倒計時到0時，自動停止
    if (count === 0) {
      clearInterval(timer); // ?? 清除定時器
      alert('倒計時結(jié)束！');
    }
  }, 1000);
  // 點擊按鈕手動停止
  document.getElementById('stopBtn').onclick = function() {
    clearInterval(timer);
    alert('倒計時已停止！');
  };
</script>

如果不清除，它會一直運行，即使你關(guān)閉了彈窗、切換了頁面，它還在后臺跑，會導(dǎo)致內(nèi)存泄漏（頁面越來越卡）。

定時器異步

首先澄清一個誤區(qū)：JS 里沒有 “真正的多線程異步” ，所有異步都是基于單線程事件循環(huán)的。

但定時器（setTimeout/setInterval）和 async/await（背后是 Promise）確實有本質(zhì)區(qū)別的。

核心前提：JS 的任務(wù)隊列分兩種

JS 事件循環(huán)里，異步代碼會被分到兩個不同的隊列：

宏任務(wù)（Macro Task） ：定時器、DOM 事件、script 整體代碼等
微任務(wù)（Micro Task） ：Promise.then/catch/finally、async/await（底層是 Promise）

優(yōu)先級規(guī)則: 每次事件循環(huán)，先清空所有微任務(wù)，再執(zhí)行一個宏任務(wù)。

同步代碼 > async/await（微任務(wù)）> 定時器（宏任務(wù)）

經(jīng)典面試題: 打印順序

console.log('1. 同步代碼'); // 同步，最先執(zhí)行
// 宏任務(wù)：定時器
setTimeout(() => {
  console.log('4. 宏任務(wù)（定時器）');
}, 0); // 延遲 0 毫秒
// 微任務(wù)：Promise
Promise.resolve().then(() => {
  console.log('3. 微任務(wù)（Promise）');
});
// async/await 也是微任務(wù)
async function test() {
  await Promise.resolve();
  console.log('3. 微任務(wù)（async/await）');
}
test();
console.log('2. 同步代碼'); // 同步，繼續(xù)執(zhí)行

輸出順序：