事件循环与定时器原理详解

golang学习网今天将给大家带来《事件循环与定时器的深度解析》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

JavaScript中的定时器（如setTimeout和setInterval）不保证精确执行，其行为受事件循环机制影响。1. 宿主环境在定时器到期后将回调放入宏任务队列，而非立即执行；2. 回调需等待当前同步代码和所有微任务（如Promise.then）执行完毕才轮到它；3. 即使设置setTimeout(fn, 0)，它也需排队等待当前事件循环阶段完成，因此不会“立即”执行；4. setInterval可能因回调执行时间过长或主线程阻塞导致任务堆积，造成“间隔漂移”；5. 为避免漂移，推荐使用链式setTimeout，在每次任务完成后重新设定定时器，确保间隔不受任务执行时间影响；6. 微任务优先于宏任务执行，这解释了为何Promise回调总是在同轮事件循环中的setTimeout回调之前执行。

JavaScript中的定时器，比如setTimeout和setInterval，它们并非按照你设定的时间精确执行，而是与事件循环机制紧密相连。说白了，它们是把一个任务“预约”到未来某个时间点，但具体什么时候能真正开始执行，这得看事件循环当时忙不忙，以及队列里有没有其他更靠前的任务。它们就像是排队取号，号拿到了，但什么时候轮到你，得看窗口的效率和前面还有多少人。

定时器这东西，它不是说时间一到，你的代码就立刻“嘣”地一下跑起来。不是的。当你调用setTimeout或setInterval时，JavaScript引擎会把你的回调函数和设定的延迟时间交给浏览器或Node.js的宿主环境。宿主环境会启动一个内部计时器。当这个计时器倒计时结束，它并不会直接执行你的回调，而是把这个回调函数扔进一个叫做“宏任务队列”（具体来说是定时器队列，它是宏任务队列的一种）的地方。

接下来，就是事件循环登场了。JavaScript是单线程的，这意味着它一次只能做一件事。事件循环的工作就是不断地检查两件事：

1. 调用栈（Call Stack）是不是空的？ 如果栈里还有代码在跑，那就得等。
2. 宏任务队列里有没有任务？ 如果调用栈空了，事件循环就会从宏任务队列里取出一个任务，推到调用栈上执行。

所以，你的定时器回调函数，它得等到：

• 当前正在执行的所有同步代码都跑完了。
• 调用栈清空了。
• 所有在这轮事件循环中产生的微任务（比如Promise的回调）都执行完了。
• 然后，事件循环从宏任务队列里取出它，才轮到它执行。

这也就解释了为什么你设定的延迟时间只是一个“最小延迟”。如果JS主线程被一个耗时很长的同步任务卡住了，或者前面有其他宏任务排队，你的定时器回调就得等，它实际执行的时间会比你设定的要晚。

为什么setTimeout(fn, 0)不是立即执行的？

这问题问得好，很多初学者都会被这个“0毫秒”给迷惑住。你可能觉得，setTimeout(fn, 0)不就是说“立刻执行”吗？但事实并非如此。

setTimeout(fn, 0)，或者更准确地说是setTimeout(fn, delay)，这里的delay参数，它代表的是一个最小延迟时间。即使你把delay设为0，它也只是告诉宿主环境：“嘿，这个fn函数，等我当前正在执行的代码跑完，并且如果可能的话，在0毫秒后把它放到宏任务队列里。”

关键点在于，它依然是一个宏任务。事件循环在处理宏任务之前，会优先清空当前的调用栈，并且处理完所有已排队的微任务（比如Promise.then()的回调）。

举个例子，你可能有这样的代码：

console.log('开始');

setTimeout(() => {
  console.log('setTimeout 回调');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise 回调 (微任务)');
});

console.log('结束');

这段代码的输出会是：

开始
结束
Promise 回调 (微任务)
setTimeout 回调

看到了吧？setTimeout的回调虽然是0毫秒延迟，但它被Promise.then()的回调（一个微任务）抢先了。这是因为事件循环的机制决定了，在处理下一轮宏任务之前，它会先把当前轮次产生的所有微任务都处理掉。所以，setTimeout(fn, 0)的真实含义是：“等当前脚本执行完毕，并且所有已排队的微任务都处理完后，尽快执行这个回调。”它是一种把任务推迟到下一个事件循环迭代的策略。

理解setInterval的“不精确性”及其潜在问题

setInterval这玩意儿，用起来好像很简单，设定一个时间间隔，它就每隔那么长时间执行一次。但它和setTimeout一样，也受事件循环的制约，而且它的“不精确性”可能会导致一些更隐蔽的问题，比如所谓的“间隔漂移”（interval drift）。

setInterval(fn, delay)的工作方式是：宿主环境在delay时间后把fn推到宏任务队列。当fn被执行后，宿主环境会再次启动一个delay时间的计时器，等时间到了，再把fn推到队列。这个过程是周而复始的。

问题就出在这里：

1. 回调函数本身的执行时间： 如果你的fn函数执行时间超过了delay，那么在fn执行期间，下一个计时器可能已经到期了。当fn执行完毕，事件循环才能处理下一个计时器任务，这就导致了后续执行的延迟。
2. 事件循环的阻塞： 如果在某个间隔期间，主线程被其他耗时任务（比如复杂的DOM操作、大量的计算）阻塞了，那么即使计时器到期，fn也无法被立即推入调用栈执行。它必须等待阻塞任务完成。

这两种情况都会导致fn的实际执行间隔比你设定的delay要长，而且这种延迟会随着时间累积，造成“漂移”。比如你设定每秒执行一次，但每次回调需要200毫秒，那么实际上你可能每1.2秒才执行一次，时间久了，就和预期差得远了。

所以，在需要精确控制执行间隔的场景，或者回调函数本身可能耗时较长时，我们通常不推荐使用setInterval。一个更稳妥的替代方案是使用链式setTimeout：

function preciseIntervalTask() {
  // 这里放你的任务代码
  console.log('任务执行了，当前时间：', new Date().toLocaleTimeString());

  // 模拟一个耗时操作
  let startTime = Date.now();
  while (Date.now() - startTime < 50) { // 假设任务耗时50ms
    // do nothing
  }

  // 任务完成后，再设置下一个定时器
  setTimeout(preciseIntervalTask, 1000); // 1秒后再次执行
}

// 首次调用
// setTimeout(preciseIntervalTask, 1000); // 如果希望第一次也延迟1秒
preciseIntervalTask(); // 如果希望第一次立即执行，然后间隔1秒

这种模式的优势在于，它确保了每次任务执行完毕后，再等待指定的时间间隔，这样就避免了任务执行时间本身对后续间隔的影响，从而减少了漂移。

事件循环中的微任务与宏任务如何影响定时器执行？

要深入理解定时器，就不得不提事件循环中的微任务（Microtasks）和宏任务（Macrotasks）的区分。这是理解JavaScript异步行为的关键。

简单来说，当JavaScript引擎在执行代码时，它会遵循一个优先级：

1. 执行当前脚本块中的同步代码：这是第一位的，所有在script标签内或模块顶层声明的代码会立即执行。
2. 处理所有已排队的微任务：当同步代码执行完毕，或者在某个宏任务执行过程中，如果产生了微任务（比如Promise.then()、MutationObserver的回调、queueMicrotask），事件循环会立即清空微任务队列，在进入下一个宏任务之前，把所有微任务都执行掉。
3. 渲染（如果是在浏览器环境）：浏览器可能会在处理完微任务后，进行页面的渲染更新。
4. 从宏任务队列中取出一个任务执行：渲染完成后，事件循环会从宏任务队列（包括定时器、I/O、UI事件等）中取出一个任务，推到调用栈上执行。
5. 循环往复：执行完这个宏任务后，又回到第2步，检查并清空微任务队列，然后是渲染，再取下一个宏任务。

这对定时器意味着什么？

定时器（setTimeout和setInterval的回调）都是宏任务。这意味着它们在事件循环中的优先级相对较低。任何在当前宏任务执行过程中产生的微任务，都会比下一个宏任务（包括你的定时器回调）更早执行。

举个例子，假设你的定时器延迟是0毫秒，并且它已经到期并被放到了宏任务队列。但如果在当前正在执行的宏任务中，你又创建了一个Promise，并且它的then回调被触发了，那么这个Promise的回调（微任务）会比你的0毫秒定时器回调先执行。

console.log('1');

setTimeout(() => {
  console.log('2 (setTimeout)');
}, 0);

Promise.resolve().then(() => {
  console.log('3 (Promise)');
});

console.log('4');

输出会是：1 -> 4 -> 3 (Promise) -> 2 (setTimeout)。

这种机制解释了为什么即使是setTimeout(fn, 0)，也无法保证立即执行。它必须等待当前的执行上下文清空，并且所有微任务都处理完毕。理解微任务和宏任务的优先级，是调试和预测异步代码执行顺序的关键，尤其是在涉及复杂交互和动画的场景下，这一点尤为重要。很多时候，你觉得代码执行顺序“不对劲”，往往就是因为没有充分考虑到微任务和宏任务的执行时机差异。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。